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.
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.
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
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
Last Comment
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.
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
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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 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
ASKER
I just found an issue.
If the content is wrapped in a DIV, then it hides the entire DIV.
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>
I add an exta attr name at the interesting wrapper divs as show the following code:
HTML:
And a small change at jquery 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>
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);
});
});
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>
Change the HTML as this (i put out the attr name and i set class=link)
JQuery:
I tested and it works for me.
<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>
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);
});
});
I tested and it works for me.
ASKER
Still not working.
What happened to it?
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>
Do you have errors in console?
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
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
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
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.
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.
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
HTML:
Open in new window
JQuery code (comments inside)
Open in new window