asked on

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

Leonidas Dosas

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

Wayne Barron

ASKER

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.

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Wayne Barron

ASKER

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

Wayne Barron

ASKER

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

Leonidas Dosas

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

Wayne Barron

ASKER

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

Leonidas Dosas

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.

Wayne Barron

ASKER

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

Leonidas Dosas

Do you have errors in console?

Wayne Barron

ASKER

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

Wayne Barron

ASKER

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

Wayne Barron

ASKER

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.