Turn single show and hide into multiple

JavaScript
1

I have one show and hide working fine, but I need the system to adapt to use 3 buttons.

This is what I got already -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();   
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>

<style>
.slidingDiv {
height:auto;
width:100%;
background-color: #99CCFF;
padding:20px;
margin-top:-20px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>

<a class="show_hide" style="color:white;">Read More</a>

<div class="slidingDiv">
text in here
</div>

But what I need is another 2 buttons to make it 3, and two more div’s holding new content in each. Sp click click a button the corresponding text appears, click the next button that previous div slides back up and the new text appears and so on.

I think what I need to add to is that the div doesnty move, all 3 have to be in exactly the same place, so ideally you only have the one div and just the content changes, but im not sure how this can be done

1 Like
2

There are lots of different way to do it. But yes. the nested list is the most commonly used. Here is a quick example

3

Hi pdxSherpa,

Thanks for the reply, but what your showing how to do is a drop down menu, when what I need is the 3 buttons like you have it, but rather than a drop down nav buttons, what I need is three buttons and on click it shows text that has been hidden.

then when you click say button 2, the text revealed by clicking button 1 slides away and the new text appears.

Its a show and hide problem, where you got 3 buttons, ideally 1 text area that gets populated with text in relation to each button.

4

Did you mean something like this?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.slidingDiv {
	background-color: #99CCFF;
	padding:20px;
	border-bottom:5px solid #3399FF;
}
.show_hide{cursor:pointer;background:red;}
</style>
</head>

<body>
<div class="show_hide" >Read More</div>
<div class="slidingDiv"> text in here 1 </div>
<div class="show_hide" >Read More</div>
<div class="slidingDiv"> text in here 2 </div>
<div class="show_hide" >Read More</div>
<div class="slidingDiv"> text in here 3 </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide(); 
$('.show_hide').click(function(){
	if ($(this).next(".slidingDiv").is(':visible')){
		$(".slidingDiv").slideUp();
		return;
	}
	$(".slidingDiv").slideUp();
	$(this).next(".slidingDiv").slideDown();
	});
});
</script>
</body>
</html>
5

Hi Paul,

I think so yes, but how does the jscript determine which div to show when they click one of the three buttons.

I’m developing it here, and first off I think there seems to be conflict with other script files.

But basically you’ll see the three buttons as they have red around them, and then I have only put the one sliding div in for now, and thats not working at the moment, and if I can get it to work I need to add another 2 div’s with their own content that relates to the button.

link to dev area

6

In my example the div that is revealed is the next() div and it reveals that one. If you are placing the revealed elements in another location then you will need to target them by id or some other method. You could use the href of the anchor to supply the id and then show that item.

I’m just out for a few hours but I will knock up an example unless someone else wants to jump in :smile:

7

Yes okay.

Here’s an example that I’ve put together that assigns each link and div an index value, so that it knows which one to use later on.

I’ve tried to ensure that the HTML code is unaffected, which helps to ensure that this can scale to any number of items that you require.

Clicking one link causes all other sliding divs to close while the selected one is opening.

8

Thanks (and much better than my effort :smile: ).

9

Apologies i missed this reply, But @Paul_Wilkins & @PaulOB got way better answers!
@Paul_Wilkins am taking your code & putting on codepen because i like it and want to play with. Hope it’s ok, of course I am attributing.

1 Like
10

Hi Paul,

Thank you very much, have just implemented that and it is very good thank you.

Thats going in the work bank for sure…

Cheers

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.