troubleshooting Question

JQuery Toggle DIV and pass Parameters to show to correct DIV ID (Working examples provided)

Avatar of Wayne Barron
Wayne BarronFlag for United States of America asked on
JavaScriptjQuery* div
13 Comments1 Solution751 ViewsLast Modified:
Hello All;

I am currently using an onclick function to show/hide my divs.
I have been using this same function for years, and I am wanting to go fully JQuery
In all of my site designs. So, I am wanting to move away from this function and move on to something more robust.

This is my current Function with an Example.
<script>
function Show(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

<a onclick ="javascript : Show('Show_1')" href="javascript:;">The First Name</a></li>
<div id="Show_1">The First Name - Information here</div>
<a onclick ="javascript : Show('Show_2')" href="javascript:;">The Second Name</a></li>
<div id="Show_2">The Second Name - Information here</div>
<a onclick ="javascript : Show('Show_3')" href="javascript:;">The Third Name</a></li>
<div id="Show_3">The Third Name - Information here</div>

However, I am wanting to get away from using the OnClick.
I am wanting to use a JQuery function that will do the same thing as the JavaScript function does.
I am testing out different ones, and I found this one to be very promising.

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$(".myLink").click(function(){
    var me = $(this),
        data = me.data('key');	
		$( "div").toggle( "slow" );
		console.log(data);
    //$('body').append(data.Param1);
});
});//]]> 
</script>

<a class='myLink' href='#' data-key='{"Param1":"ShowMyZones_1"}' >Link One</a> | 
 <a class='myLink' href='#' data-key='{"Param2":"ShowMyZones_2"}' >Link Two</a>
<div id="ShowMyZones_1" style="display:none;">information here, for ONE!</div>
<div id="ShowMyZones_2" style="display:none;">information here, for TWO!</div>

The issue with this, is when you click on either link, it will display both DIV's.
I need it to display only that DIV that goes with it's ID.
And, if you click on another link, it will open that DIV ID, and Close the other opened DIV's.
(Not everyone follows the rules of closing things that you open... The Fridgarator for one... )
Keeping in mind, that this is just an example.
The ID's will range from = 1, 2, 4, 7, to something like = 350, 80, 300, 1,034, etc...
So the numbers are never going to be in order. And even if they were in order from lowest to highest, it would be so scattered that it would be not usuable in anytype of query, unless the query was to look at the lowest to the highest number and sort them.

Any idea's on this one?
Carrzkiss
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 13 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros