Menu Jump [RD]

[°•.DANI DARKO.•°]

Reference 1: avaricexx.proboards.com/index.cgi (welcome table under "staff" tab)
Reference 2: anikira.proboards.com/ (sidebar under "staff" tab)

In both of these examples, when you click an image it triggers text to appear underneath (or next to it or whatever.) Can someone please tell me what code will let me do this? If it helps to know, my goal is to a few images right next to each other like in the "Staff" section of this site's sidebar. And when you click each image I want a description to appear underneath the row of images.

[Tumbleweed]

°•.DANI DARKO.•°,
Your subject title threw me for a bit. Thought you were talking about the forum jump. Anyway, in FAQ's look for an Expand/collapse code.

support.proboards.com/thread/110159/new-code-support-june-2009

[°•.DANI DARKO.•°]

Oh sorry about that, I didn't know what it was called. I was just making up names. Thanks for the link! I have two questions.

1) How can I make it so that the collapsible items are already hidden on default?

2) Is it possible to set it so that when you click on a link the content from the previous link goes away? So if I click image one and make the content appear, I want it so that when I click image two, the content from image one hide automatically but the content from image two appears so that they replace one another.

[Tumbleweed]

May 26, 2013 16:31:03 GMT -8 °•.DANI DARKO.•° said:

Oh sorry about that, I didn't know what it was called. I was just making up names. Thanks for the link! I have two questions.

You made me bust out laughing with that making up names. lol

1) How can I make it so that the collapsible items are already hidden on default?

2) Is it possible to set it so that when you click on a link the content from the previous link goes away? So if I click image one and make the content appear, I want it so that when I click image two, the content from image one hide automatically but the content from image two appears so that they replace one another.

Rather than the collapse code in the link I gave you, try this: (It's jquery.)

This would go above your side table:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>


<script>
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').show();
});
jQuery('.showOne').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
</script>

<style>
.my_images img{
width: 47px;
height: 100px;
}
.targetDiv{
width:200px;
height: 100px;
background-color: #bbaaaa;
}
</style>


And then this goes in your side table: The first part you put your images and the second part your content. The content will be hidden at first and switch content when clicke.


<div class="my_images">

<a class="showOne" target="1"><img src="http://image1.jpg"></a>
<a class="showOne" target="2"><img src="http://image2.jpg"></a>
<a class="showOne" target="3"><img src="http://image3.jpg"></a>
<a class="showOne" target="4"><img src="http://image4.jpg"></a>
</div>



<div id="div1" class="targetDiv" style="display: none;">Content 1</div>
<div id="div2" class="targetDiv" style="display: none;">Content 2</div>
<div id="div3" class="targetDiv" style="display: none;">Content 3</div>
<div id="div4" class="targetDiv" style="display: none;">Content 4</div>


Let me know if that works for you. Oh, and you'll notice some css with it. You can style the content box as you wish but be sure to put the width and height of the images you'll use in that css. On a side note, when you to convert to V5, if you haven't already, this should work in V5. I can't see your first post at the moment so don't remember if you provided a link to your site.

[°•.DANI DARKO.•°]

Yes this is definitely a lot closer to what I am looking for and it is working beautifully so far. I just have one more question. In addition to having the expanded content replace one another, I also still want to be able to hide it again when you double-click the link.

Ah and I just realized I hadn't linked my site. Sorry about that, I could've sworn I did. Here it is: www.testdryve2.proboards.com

[Tumbleweed]

°•.DANI DARKO.•°,
That's o.k. Add the blue to that jquery I gave you.

<script>
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').show();
});
$(".showOne").dblclick(function(){
jQuery('.targetDiv').hide();
});
jQuery('.showOne').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
</script>

[°•.DANI DARKO.•°]

It worked but I think I might have worded my vision inaccurately. Instead of having to literally double click the image, I wanted to have it so that a single click would toggle the content on/off. So that clicking an image once would show it and clicking the same image once more would hide it, but clicking the next image once while the previous content was displayed would replace the previous content with the new information.

[Tumbleweed]

I'm fairly new to jquery and I can't think how I'd get the browser to keep track how many times something was clicked. In this case, one click to show and the second click to hide, especially if someone is clicking all of them off and on, going back and forth. It might be something really simple, I'm not thinking of or maybe it can't be done. (unlikely) The only way I can think to do it is by having some text to close them all just as you can have a link to open them all. But I know that isn't what you want.

I promise, if my brain kicks in on how to do this, I'll be sure to post it.

[Chris]

Try replacing the section that sets the click handler with this
jQuery('.showOne').click(function () {
var viz = jQuery('#div'+$(this).attr('target')+':visible').length;
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target'))[viz?"hide":"show"]();
});


[°•.DANI DARKO.•°]

That worked perfectly Eton Bones. Thank you both so much for your help. It was greatly appreciated!