Toggle Code Help??

[?Leslie?]

Hi everybody,

I'm currently having an issue with a code in my sidebar on The Shimmering Wand. Basically I have a bit of toggle code that allows information to drop down when you click an image. So far there is one image on my forum, which you can see at the bottom of the side bar, that will allow information to drop down below the image when clicked. This works perfectly, however....here is the tricky part. I need four images, one for each house crest, that when clicked will drop down information for that specific house. So if I clicked the Gryffindor house crest I would be able to see the information for Gryffindor...and so on and forth for each of the house shields.

I've tried a couple of things so far without any success:

First -  I tried to duplicate the code and change the image...this didn't work...for two reasons: 1.) The second image was below the first image instead of beside it...and 2.) When the image was clicked, the information didn't drop down below with the information for that house, instead it activated the drop down for the first image above it.

Second - I tried to change the ToggleTarget ID to the house names to see if that would work and it made the code stop working all together...so that was a no no. Maybe this is the way to achieve what I need...but I was doing something wrong?

Third - I tried to insert a second set of information into the same bit of toggle code because I thought, for some crazy reason, that would work...and it didn't.

So I'm totally at a loss...and I'm not code savvy enough to figure this one out on my own. If perhaps somebody else knows how I might achieve this, I would greatly appreciated it.

<style type="text/css">
#ToggleTarget {
display: none;
}
</style>

<script type="text/javascript">
function Toggle() {
var el = document.getElementById("ToggleTarget");
if (el.style.display == "block") {
el.style.display = "none";
}
else {
el.style.display = "block";
}
}
</script>

<p><a href="javascript:Toggle();"><center><img src="http://i41.tinypic.com/5b7n5y.gif"></center></a></p>

<div id="ToggleTarget">Gryffindor house information listed here!</div>

[Wormopolis]

when you give something an id, it is meant to be unique. you cant have 4 boxes with the id="toggleTarget" because javascript is going to assume there is only 1 and only affect the first one.

however, now that jquery is native to PB, you can make this process a whole lot easier.


in your HTML, give all of the boxes you want to be toggleable (I think that word is right) the CLASS of "togglefied"
and you if you want them all hidden initially, give them an inline style of "display:none"


so for example

<table class="togglefied" style="display:none">


or a div or whatever.





now the script stuff would simply be:

<script type="text/javascript">
$('.togglefied').bind('click',function(){ $(this).toggle(); });
</script>



if you really wanted to get fancy, change the toggle to be

.toggle('slow')

[?Leslie?]

Hi Worm, thanks for your help! I do have one question though. Because I'm only using one sidebar container will the four toggle-able boxes still work, or must they be in individual containers? I was trying to keep all of the sidebar information in one container rather than many.

[Wormopolis]

you sort of mixed the old and new together there

the table HTML is out of place, so if you are going to use divs, then just use divs.

the script will need to go below all the divs.

[?Leslie?]

Oh my gosh, I'm so confused by coding. I'm so sorry...haha. So what should the main foundation of the code look like..before I add in all of the <div>? If I don't need the HTML then I would rather use <div> in the code. I'm just not sure which parts to remove. I'm worried that I'll mess something up. I would love to understand what you're telling me to do here, so if you can explain everything that needs to be done and why, then show me what the code should look like, it'll be a little easier for me to understand and learn.

[Wormopolis]

<div class="togglefied">
div 1 stuff
</div>

<div class="togglefied">
div 2 stuff
</div>

<div class="togglefied">
div 3 stuff
</div>

<script>

---

that is about as simple as I can get with it.  you should probably learn how to do HTML and CSS if you really want to be the master of your own destiny on this.  w3schools.com is a good place to start to learn the basics of HTML and CSS.

[?Leslie?]

Sorry Worm, I really appreciate your help and the fact that you're trying to explain things for me. The part that is confusing me is what do I need to change about the code that I started off with? You suggested adding bits to the code, but I'm unsure of where everything needs to go. If that makes any sense lol...So...in the code I started, what needs to be subtracted and what needs to be added where? I've bookmarked the link for that website you shared. I'm definitely going to look into that more tomorrow, because I'd love to learn how to do this stuff without having to bug you guys all the time. Thanks for being patient with me. And I'm sorry if I'm being a pain in the butt.

[Wormopolis]

dont think of it as adding and subtracting. you need divs that can be toggled, so if you start with what I posted above, you get divs. you canput whatever you want insode them.
the script part from several posts back goes where the script tag is.

dont try to reuse the old coding. it isnt going to work. just transfer your content into the new divs.

what you will end up with, is however many divs with the content in each. then a script that tells them to toggle being hidden or not when you click on them.

[?Leslie?]

Thanks for the help Worm, I appreciate it!