One function to toggle multiple divs

Question

genzoman 0 Newbie Poster

13 Years Ago

I will have a page with about a 100 or so different links and I would like each one to toggle the visibility of its corresponding hidden div. For instance, if I have a county 'Johnson' when it's clicked I would like the hidden div associated with that county to become visible. I would like to do this without having to write a different function for each one. Is there a way to do this easily?

Below is a solution I was given elsewhere but I couldn't get it to work.

Most ideal of all I would like it to work with an image map, with each county having it's own set of stats to be toggled in. Thanks for the help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$('.county').click(
    function(){
        var thisIs = $(this).index();
        $('.countystats').eq(thisIs).slideToggle(300);
    });
	</script>
    <style type="text/css">
	.county{ color:green;;
}
.countystats{
    background-color:blue;
    display:none;
}
</style>

</head>

<body>
<div>
    <a class="county" href="#">one</a>
    <a class="county" href="#">two</a>
</div>
<div class="countystats">stats one</div>
<div class="countystats">stats two</div>
<br />
<br/>

</body>
</html>

javascript jquery

3 Contributors
9 Replies
2K Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by genzoman

Fortinbra 37 Posting Whiz in Training

13 Years Ago

First, I would give all your Divs a unique id, and the easy/tedious way of doing this would be to list every div you want hidden, and set them to hidden using javascript, then set the visibility of the ones you want shown. Create one function that hides all of them, and at the end of that function show the div who's id you passed into the function.

tinymark 1 Junior Poster

13 Years Ago

Here's a little solution I whipped up.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.county{
	color:blue;
}
.countystats{
    background-color:blue;
	width:100px;
}
</style>
 
</head>
 
<body>
<div>
    <a class="county" href="#">one</a>
    <a class="county" href="#">two</a>
</div>
<div class="countystats">stats one</div><br />
<div class="countystats">stats two</div>
<br />
<br/>
 <script type="text/javascript" src="../scripts/jquery-1.4.4.min.js"></script>
<script type='text/javascript'>
$('a.county').each( function(e){
        $(this).bind('click', function(e){ var thisIs = $(this).index(); $('.countystats').eq(thisIs).slideToggle(1000); });
});
</script>
</body>
</html>

I changed a few things so look at it carefully. I believe your problem is related to the slideToggle function. I start by showing it and then toggling it back and forth.

The way you have the code, your countystats class has to have the display changed from none to inherit or block. That pops the display of countystats open and then immediately closes it down. It looked a little off.

Hope this helps.

tinymark 1 Junior Poster

13 Years Ago

None that I can see. I tested it in Linux with 3 browsers and Windows with 4 browsers. Sorry, I couldn't help you.

genzoman commented: great help! +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

genzoman 0 Newbie Poster · Answer 1 · 2011-03-31T21:32:23+00:00

Thanks for taking a look at this. I tried your code but I can't get the divs to toggle; the links do nothing when clicked.. Did you test it and it worked for you?

tinymark 1 Junior Poster · Answer 2 · 2011-03-31T22:21:20+00:00

I tested it. Did you make the changes that reflect the location of your jquery.js file?

genzoman 0 Newbie Poster · Answer 3 · 2011-03-31T22:30:59+00:00

Yes, I did. I have the jquery.js file in the same directory as the html page and this is the exact code I'm using. http://karrn.org/test/multipletoggledivtest.html
is the URL. The source is the same and my jquery works on every other page. Any reason why this piece isn't working?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.county{
	color:blue;
}
.countystats{
    background-color:blue;
	width:100px;
}
</style>
 
</head>
 
<body>
<div>
    <a class="county" href="#">one</a>
    <a class="county" href="#">two</a>
</div>
<div class="countystats">stats one</div><br />
<div class="countystats">stats two</div>
<br />
<br/>
 <script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript'>
$('a.county').each( function(e){
        $(this).bind('click', function(e){ var thisIs = $(this).index(); $('.countystats').eq(thisIs).slideToggle(1000); });
});
</script>
</body>
</html>

genzoman 0 Newbie Poster · Answer 4 · 2011-03-31T22:31:41+00:00

Yes, I did. I have the jquery.js file in the same directory as the html page and this is the exact code I'm using. http://karrn.org/test/multipletoggledivtest.html
is the URL. The source is the same and my jquery works on every other page. Any reason why this piece isn't working?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.county{
	color:blue;
}
.countystats{
    background-color:blue;
	width:100px;
}
</style>
 
</head>
 
<body>
<div>
    <a class="county" href="#">one</a>
    <a class="county" href="#">two</a>
</div>
<div class="countystats">stats one</div><br />
<div class="countystats">stats two</div>
<br />
<br/>
 <script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript'>
$('a.county').each( function(e){
        $(this).bind('click', function(e){ var thisIs = $(this).index(); $('.countystats').eq(thisIs).slideToggle(1000); });
});
</script>
</body>
</html>

genzoman 0 Newbie Poster · Answer 5 · 2011-03-31T23:23:53+00:00

That's so strange. May I ask what version of jQuery you are using? This isn't the first time a solution seemed to work for someone else but didn't for me. I don't know what the deal is, especially since I copied and pasted the code to eliminate the possibility of error. I even used changed the code to Microsoft's hosting of jQuery and it still didn't work..

genzoman 0 Newbie Poster · Answer 6 · 2011-03-31T23:28:53+00:00

OK, I found out what it was. The jQuery I was using was an older version. The solution you came up with did in fact help. Thanks so much!