On-click Drop-down coding

I'm not completely sure the technique it is, but I would like to incorporate it in some of the widgets on my forum.

How it would work is one would click on an image and then text drops down from it. It works similarly to a spoiler except you click on an image instead. I primarily want to use this for my staff widget, where the staff info would be hidden until one clicks on the image which drops down the members of staff. However, I have a feeling if I try doing it myself, something will mess up and I'll have to recreate the widget all over again. Which is why I have come to you guys for assistance.

Site link: http://www.narutolegacy.com/

Hello,

so, tell me if I understood

you want in a widget (only for staff) an image, that if clicked, shows below it what you want?

Yes, that is correct. :)

try this

paste this code in the content of a widget

Code:

<div id="staffonly"></div>

and add this javascript in your forum (via Javascript management panel) on index (where the widget is shown)

Code:

$(document).ready(function() {  $('.revealer').click(function() {$('#object').slideToggle(400);return false;});});

and this is another javascript to add (same on index)

Code:

jQuery(window).load(function() {
        if (typeof _userdata === "undefined") return;
    if (_userdata['user_level'] == '1' OR _userdata['user_level'] == '2') {
           jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
        }
});

let me know

Should the two javascripts be separate?

that would be better

Okay, I inputted all three things, but it hasn't done anything. Do I have to add to the CSS as well? If so, what do I need to add?

Here's the link: http://www.narutolegacy.com/

Also, when I submitted the javascripts, the image for my pop-up chatbox disappeared, as well as the very bottom of the page.

try to use this code:

Code:

jQuery(window).load(function() {
        if (typeof _userdata === "undefined") return;
    if (_userdata['user_level'] == '2') {
          jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
        }
});
jQuery(window).load(function() {
        if (typeof _userdata === "undefined") return;
    if (_userdata['user_level'] == '1') {
          jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
        }
});

Okay, well I think the javascript is working now. However, I think I'm getting the placement wrong in the widget itself. Here is the coding:

Code:

<div id="staffonly">
   
   <div align="center"><img src="http://i58.tinypic.com/351wgfb.png" class="revealer" />
      <div style="display: none;" id="object">
          Click to View
      </div>
       <br /><br />
      <div style="border-width: 1px; border-style: solid; border-color: #353535;">
          <img src="http://i58.servimg.com/u/f58/15/11/84/39/eden110.png" style="float: left; padding-right: 7px;" />
         <div style="color: #8C8C8C;">
             <strong> EDEN:</strong>
         </div>
         
         <div style="padding-right: 4px; padding-bottom: 4px; padding-left: 2px;">
             <span style="color: #8C8C8C;">This girl is the lovely person running Legacy daily. She can help you with everything. Please keep in mind that she might not always be able to respond things fast as it takes a lot of time being the head administrator. Eden is also the Oujoukage, which means that besides being an active staff member, she is also busy IC.</span>
         </div>
      </div>
      
   </div>
</div><br /><br />
<div align="center">
    <img src="http://i61.tinypic.com/mhvxb5.png" />
</div>
<div id="staffonly">
    <br /><br />
   <div style="border-width: 1px; border-style: solid; border-color: #353535;">
       <img src="http://i58.servimg.com/u/f58/15/11/84/39/isas10.png" style="float: right; padding-left: 7px;" />
      <div style="padding-left: 4px; padding-bottom: 4px; padding-right: 2px;">
         
         <div style="color: #8C8C8C;">
             <strong> ISAIS:</strong>
         </div>
          <span style="color: #8C8C8C;">This guy is one of the administrators assisting Eden. He can usually be found in the chatbox helping out members. Don't worry, he doesn't bite. Isais is also the Fubukikage, which means that besides being an active staff member, he is also busy IC.</span>
      </div>
      
   </div><br /><br />
   <div style="border-width: 1px; border-style: solid; border-color: #353535;">
       <img src="http://i58.servimg.com/u/f58/18/70/82/43/nova10.png" style="float: left; padding-right: 7px;" />
      <div style="color: #8C8C8C;">
          <strong> NOVA:</strong>
      </div>
      
      <div style="padding-right: 4px; padding-bottom: 4px; padding-left: 2px;">
          <span style="color: #8C8C8C;">Nova here used to be an administrator but stepped down a long time ago. From time to time, he visits the place and helps out with the coding or answer questions that the current staff might have.</span>
      </div>
      
   </div><br /><br />
   <div style="border-width: 1px; border-style: solid; border-color: #353535;">
       <img src="http://i.imgur.com/CgUpWy2.jpg" style="float: right; padding-left: 7px; width: 75px; height: 75px;" />
      <div style="padding-left: 4px; padding-bottom: 4px; padding-right: 2px;">
         
         <div style="color: #8C8C8C;">
             <strong> HISAME:</strong>
         </div>
          <span style="color: #8C8C8C;">This is the second, lovely Administrator of Naruto Legacy. She will assist you in whatever way she can, and she is the best option to get Eden's attention if she isn't online.</span>
      </div>
      
   </div>
</div><br /><br />
<div align="center">
    <img src="/imghere" />
</div>
<div id="staffonly">
    <br /><br />
   <div style="border-width: 1px; border-style: solid; border-color: #353535;">
       <img src="http://static.tumblr.com/jqyzupm/C25md69i4/edannn.png" style="float: left; padding-right: 7px; width: 75px; height: 75px;" />
      <div style="color: #8C8C8C;">
          <strong> XAVIER:</strong>
      </div>
      
      <div style="padding-right: 4px; padding-bottom: 4px; padding-left: 2px;">
          <span style="color: #8C8C8C;">He's a pimp and a Global Moderator of Naruto Legacy. He's really fun to chat with on the chatbox and it's easy to get a ton of good laughs with him.</span>
      </div>
      
   </div>
</div><br /><br />
<div align="center">
    <img src="http://i60.tinypic.com/2dgp0nb.png" />
</div>
<div id="staffonly">
    <br /><br />
   <div style="border-width: 1px; border-style: solid; border-color: #353535;">
       <img src="http://i58.servimg.com/u/f58/18/70/82/43/gray-310.png" style="float: right; padding-left: 7px; width: 75px; height: 75px;" />
      <div style="padding-left: 4px; padding-bottom: 4px; padding-right: 2px;">
         
         <div style="color: #8C8C8C;">
             <strong> RUMI:</strong>
         </div>
          <span style="color: #8C8C8C;">This kid is a moderator of the site. You'll catch him around the chatbox often, helping out members and making a fun ruckus. He yells a lot too, so make sure you bring some headphones with you.</span>
      </div>
      
   </div><br /><br />
   <div style="border-width: 1px; border-style: solid; border-color: #353535;">
       <img src="http://i.imgur.com/n8dLYOW.png" style="float: left; padding-right: 7px; width: 75px; height: 75px;" />
      <div style="color: #8C8C8C;">
          <strong> SEMASU:</strong>
      </div>
      
      <div style="padding-right: 4px; padding-bottom: 4px; padding-left: 2px;">
          <span style="color: #8C8C8C;">This person is a Moderator of Naruto Legacy. He's really fun to chat with on the chatbox and it's easy to get a ton of good laughs with him. He enjoys talking about manga and he has a very helpful spirit. If you catch him online, he will be more than willing to assist.</span>
      </div>
      
   </div>
</div><br /><br />

Actually you don't have to edit this:

Code:

<div id="staffonly"></div>

the content you want to add (if staff) must be placed here

Code:

jQuery(window).load(function() {
        if (typeof _userdata === "undefined") return;
    if (_userdata['user_level'] == '2') {
          jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
        }
});
jQuery(window).load(function() {
        if (typeof _userdata === "undefined") return;
    if (_userdata['user_level'] == '1') {
          jQuery('#staffonly').before('<img src="LINKIMG" class="reveler"><div id="object" style="display: none;">Shown on click content</div>');
        }
});

*replace Shown on click content with your code twice ("Shown on click content" appears twice)

One last question. Can the javascript pieces be replicated if we want more than the two? I want each of the images to be drop-downs for the staff members in the widget.

Sure you can

You will have a string like this for another image
and another one for this

Code:

<img src="LINKIMG2" class="reveler2"><div id="object2" style="display: none;">Shown on click content2</div>

and another javascript

Code:

$(document).ready(function() {  $('.revealer2').click(function() {$('#object2').slideToggle(400);return false;});});

you will have to change revelar and object in the javascript code and in the "html code" inside the other javascript code

Okay, last question and this one is quick. The $(document).ready(function() javascript. Does that go in with the other one? Or should it be made into a completely new submission?

The previous message has been deleted from this post. I figured out why the drop-down wasn't working. Just answer what I asked above.

yes, in another one

Okay, I need you to take a look at the coding. I must be doing something wrong. May I request that you use a vacant Admin account on our site so you can take a look at the coding and fix it?

I submitted the next set and somehow the widgets enlarged. And the administrators one for the images in the widget; there is only one rather than two like the webmaster images. I can send you a PM here with a username and password, if you accept my request.

mmh, yes, I think that would be better

A PM has been sent.

hello Eden Alexandria

Hello, If the issue is solved, please let us know with a message If not, we remind you that you are allowed to BUMP every 24 hours