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

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>

Open in new window


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>

Open in new window


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
LVL 31
Wayne BarronAuthor, Web DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
First i made a small chnges in your HTML code.In the data attr. ath the key posistion i set one common for all div key named Param:
HTML:
 <a class='myLink' href='#' data-key='{"Param":"ShowMyZones_1"}' >Link One</a> | 
 <a class='myLink' href='#' data-key='{"Param":"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>

Open in new window


JQuery code (comments inside)

$(window).load(function(){

 $(".myLink").click(function(){
  //The following line hide a div that is already visible
  $('div:visible').toggle("slow");
  var me = $(this),
  data = me.data('key');
  //After I took the key i am using it to the following line to target the desire div with the id selector;
  $("#"+data.Param).toggle( "slow" );    
    
});
});

Open in new window

0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Looks good.
But one thing, if you do not mind.

When you click on the link and then click on it again.
It needs to Hide, instead, it is hiding and then showing again.
0
Leonidas DosasCommented:
$(window).load(function(){

 $(".myLink").click(function(){
   
  //The following line hide a div that is already visible
  $('div:visible').toggle("slow");
  var me = $(this),
  data = me.data('key');
  var flag=data.Param;
  //After I took the key i am using it to the following line to target the desire div with the id selector;
  //I use sessionStorage to create and store a key-value pair in the sessionStorage
  //Then I use an if condition to check if exist or no the value and then if is no the code is executing
  //Remember that sessionStorage keeps the key-value until you close the tab of the browser
  if(sessionStorage[data.Param]==null){
  $("#"+data.Param).toggle( "slow" );
  }
  sessionStorage[data.Param]=data.Param;
  console.log(sessionStorage);
});
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Wayne BarronAuthor, Web DeveloperAuthor Commented:
You Leonidas Dosas.
I love the way you comment your code, you explain what is happening, and what to do with it.
It is nice to see that this type of coding still exists.
To be honest, I thought it was gone, except for myself.
When I provide code for people, I always comment my code, so they know what is going on.

Thank you for the time you took in this one.
Have a wonderful rest of the week.
Wayne
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I just found an issue.

If the content is wrapped in a DIV, then it hides the entire DIV.

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

<script type='text/javascript'>
$(window).load(function(){

 $(".myLink").click(function(){
   
  //The following line hide a div that is already visible
  $('div:visible').toggle("slow");
  var me = $(this),
  data = me.data('key');
  var flag=data.Param;
  //After I took the key i am using it to the following line to target the desire div with the id selector;
  //I use sessionStorage to create and store a key-value pair in the sessionStorage
  //Then I use an if condition to check if exist or no the value and then if is no the code is executing
  //Remember that sessionStorage keeps the key-value until you close the tab of the browser
  if(sessionStorage[data.Param]==null){
  $("#"+data.Param).toggle( "slow" );
  }
  sessionStorage[data.Param]=data.Param;
  console.log(sessionStorage);
});
});
</script>
<div>
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_1"}' >Link Text</a> |  
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_2"}' >Link Text</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_3"}' >Link 3</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_4"}' >Link 4</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>


<div id="ShowMyZones_3" style="display:none;">information here, for 3!</div>
<div id="ShowMyZones_4" style="display:none;">information here, for 4!</div>
</div>

Open in new window

0
Leonidas DosasCommented:
I add an exta attr name at the interesting wrapper divs as show the following code:
HTML:
<div>
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_1"}' >Link Text</a> |  
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_2"}' >Link Text</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_3"}' >Link 3</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_4"}' >Link 4</a>
<div name="link" id="ShowMyZones_1" style="display:none;">information here, for ONE!</div>
<div name="link" id="ShowMyZones_2" style="display:none;">information here, for TWO!</div>


<div name="link" id="ShowMyZones_3" style="display:none;">information here, for 3!</div>
<div name="link" id="ShowMyZones_4" style="display:none;">information here, for 4!</div>
</div>

Open in new window


And a small change at jquery code

$(window).load(function(){

 $(".myLink").click(function(){
   
  //The following line hide a div with name=link that is already visible
  $('div[name="link"]:visible').toggle("slow");
  var me = $(this),
  data = me.data('key');
  var flag=data.Param;
  //After I took the key i am using it to the following line to target the desire div with the id selector;
  //I use sessionStorage to create and store a key-value pair in the sessionStorage
  //Then I use an if condition to check if exist or no the value and then if is no the code is executing
  //Remember that sessionStorage keeps the key-value until you close the tab of the browser
  if(sessionStorage[data.Param]==null){
  $("#"+data.Param).toggle( "slow" );
  }
  sessionStorage[data.Param]=data.Param;
  console.log(sessionStorage);
});
});

Open in new window

0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Click on the links, and it does not work.

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

<script type='text/javascript'>
$(window).load(function(){

 $(".myLink").click(function(){
   
  //The following line hide a div with name=link that is already visible
  $('div[name="link"]:visible').toggle("slow");
  var me = $(this),
  data = me.data('key');
  var flag=data.Param;
  //After I took the key i am using it to the following line to target the desire div with the id selector;
  //I use sessionStorage to create and store a key-value pair in the sessionStorage
  //Then I use an if condition to check if exist or no the value and then if is no the code is executing
  //Remember that sessionStorage keeps the key-value until you close the tab of the browser
  if(sessionStorage[data.Param]==null){
  $("#"+data.Param).toggle( "slow" );
  }
  sessionStorage[data.Param]=data.Param;
  console.log(sessionStorage);
});
});
</script>
<div>
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_1"}' >Link Text</a> |  
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_2"}' >Link Text</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_3"}' >Link 3</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_4"}' >Link 4</a>
<div name="link" id="ShowMyZones_1" style="display:none;">information here, for ONE!</div>
<div name="link" id="ShowMyZones_2" style="display:none;">information here, for TWO!</div>
<div name="link" id="ShowMyZones_3" style="display:none;">information here, for 3!</div>
<div name="link" id="ShowMyZones_4" style="display:none;">information here, for 4!</div>
</div>

Open in new window

0
Leonidas DosasCommented:
Change the HTML as this (i put out the attr name and i set class=link)

<div>
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_1"}' >Link Text</a> |  
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_2"}' >Link Text</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_3"}' >Link 3</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_4"}' >Link 4</a>
<div class="link" id="ShowMyZones_1" style="display:none;">information here, for ONE!</div>
<div class="link" id="ShowMyZones_2" style="display:none;">information here, for TWO!</div>


<div class="link" id="ShowMyZones_3" style="display:none;">information here, for 3!</div>
<div class="link" id="ShowMyZones_4" style="display:none;">information here, for 4!</div>
</div>

Open in new window


JQuery:

$(window).load(function(){

 $(".myLink").click(function(){
   
  //The following line hide a div with name=link that is already visible
  $('div.link:visible').toggle("slow");
  var me = $(this),
  data = me.data('key');
  var flag=data.Param;
  //After I took the key i am using it to the following line to target the desire div with the id selector;
  //I use sessionStorage to create and store a key-value pair in the sessionStorage
  //Then I use an if condition to check if exist or no the value and then if is no the code is executing
  //Remember that sessionStorage keeps the key-value until you close the tab of the browser
  if(sessionStorage[data.Param]==null){
  $("#"+data.Param).toggle( "slow" );
  }
  sessionStorage[data.Param]=data.Param;
  console.log(sessionStorage);
});
});

Open in new window


I tested and it works for me.
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Still not working.
What happened to it?

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

<script type='text/javascript'>
$(window).load(function(){

 $(".myLink").click(function(){
   
  //The following line hide a div with name=link that is already visible
  $('div.link:visible').toggle("slow");
  var me = $(this),
  data = me.data('key');
  var flag=data.Param;
  //After I took the key i am using it to the following line to target the desire div with the id selector;
  //I use sessionStorage to create and store a key-value pair in the sessionStorage
  //Then I use an if condition to check if exist or no the value and then if is no the code is executing
  //Remember that sessionStorage keeps the key-value until you close the tab of the browser
  if(sessionStorage[data.Param]==null){
  $("#"+data.Param).toggle( "slow" );
  }
  sessionStorage[data.Param]=data.Param;
  console.log(sessionStorage);
});
});
</script>
<div>
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_1"}' >Link Text</a> |  
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_2"}' >Link Text</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_3"}' >Link 3</a> | 
<a class='myLink' href='#' data-key='{"Param":"ShowMyZones_4"}' >Link 4</a>
<div class="link" id="ShowMyZones_1" style="display:none;">information here, for ONE!</div>
<div class="link" id="ShowMyZones_2" style="display:none;">information here, for TWO!</div>
<div class="link" id="ShowMyZones_3" style="display:none;">information here, for 3!</div>
<div class="link" id="ShowMyZones_4" style="display:none;">information here, for 4!</div>
</div>

Open in new window

0
Leonidas DosasCommented:
Do you have errors in console?
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
This is all that shows in the console.

Storage
ShowMyZones_1
:
"ShowMyZones_1"
ShowMyZones_2
:
"ShowMyZones_2"
ShowMyZones_3
:
"ShowMyZones_3"
ShowMyZones_4
:
"ShowMyZones_4"
length
:
4
__proto__
:
Storage

Open in new window

0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
It is OK.
Read on...

Works in
Microsoft Edge
Firefox
Internet Explorer (11)
Google Chrome (All profiles but the EE profile)

Does not work in
Google Chrome (My EE Profile, for some reason, it will not work in this profile. Not really sure why? strange.
Will have to close this one down and give it a shot)

But all is good.
Sorry for the hassle on this ending here.
I should have tested it in other browsers before posting.

Have a good one.
Wayne
0
Wayne BarronAuthor, Web DeveloperAuthor Commented:
FOUND The problem.

You stated in the comments.
>>//Remember that sessionStorage keeps the key-value until you close the tab of the browser

You can only click on a link one time.
After that one time, you cannot click on it again, until, as you stated.
The tab is closed.
That is fine, as long as the person chooses where to go, as the drop list that is shown, is a navigation system.

So, I am not certain this is going to work.
As beautiful of a script that it is, and I am certain it will come in handy on some other project.
However, I cannot forsee rather a person is going to browse the navigation, before settling on a link to click on.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.