Avatar of Wayne Barron
Wayne Barron
Flag for United States of America 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
JavaScriptjQuery* div

Avatar of undefined
Last Comment
Wayne Barron

8/22/2022 - Mon
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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.