I am a bit of a novice with jquery. Basically I want to show only the div that corresponds to the link clicked and hide the divs unrelated to that link.

Below is an example of what I want to do and the script I am struggling with. This is for WordPress which is why “JQuery” is spelled out rather than just “$”.

jQuery(document).ready(function() { 
	var clickLink = [".link1", ".link1", ".link1"];
	var toggleDiv = ["#link1", "#link1", "#link1"];
	for (i=0; i < toggleDiv.length; i++) {
		jQuery(toggleDiv[i]).hide();
	}
	jQuery('#linkBank a').click(function() {
           for (i=0; i < clickLink.length; i++) {
           		if (this.id == clickLink[i]) {
           			jQuery(toggleDiv[i]).toggle();
           		}
           }
           
           return false;
       });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="linkBank">
<a href="#" id="link1">First Link</a>
<a href="#" id="link2">Second Link</a>
<a href="#" id="link3">Third Link</a>
</div>

<div class="link1">You clicked on First Link</div>
<div class="link2">You clicked on Second Link</div>
<div class="link3">You clicked on Third Link</div>

Read more here: jquery: I want to show a specific div when its corresponding link is clicked


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: