We Keep Coding

how to use same jQuery function on multiple group of lists

I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.
Here is the html code:
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Here is the jQuery function:
$(document).ready(function() {
$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});
$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
});

You may reduce everything to only one event handler.
$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> ></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>

Your problem is coming from how you find the active image. There are presumably multiples, but you want to find the one related to whatever was clicked. Change lines like this:
$('img.active')
to something like:
$(this).closest("ul.results").find("img.active")
to get the img.active within the clicked ul.

On mouseover <li> show Div but if mouseover another li hide div and show correct

I'm trying to finish with you guys this mega menu i'm building,
in another question i was helped showing and hiding a div while mouseover on <li>: List items show / hide different and separate div with jQuery
What I'm trying to achieve is that when i mouse over a li element i want to show a div correlated to it, but when i mouseover it must stay there (so the user can navigate into it), while if i mouseover on another li element it hides the previous one and shows its correlated div.
jQuery I'm using:
$('#menu-left li').hover(
function() {
$("#" + $(this).data("menu")).show();
},
function() {
$("#" + $(this).data("menu")).hide();
}
);
Html:
<div class="cbi-main-menu">
<div class="row">
<div class="col-md-3">
<div class="cbi-menu-sidebar">
<h3 class="menu-item-prime">Menu</h3>
<ul id="menu-left" class="no-style">
<li data-menu="item-1"><a id="lnk1" href="#" class="menu-item-1" >Link 1</a></li>
<li data-menu="item-2"><a id="lnk2" href="#" class="menu-item-2">Link 2</a></li>
<li data-menu="item-3"><a id="lnk3" href="#" class="menu-item-3">Link 3</a></li>
<li data-menu="item-4"><a id="lnk4" href="#" class="menu-item-4">Link 4</a></li>
<li data-menu="item-5"><a id="lnk5" href="#" class="menu-item-5">Link 5</a></li>
<li data-menu="item-6"><a id="lnk6" href="#" class="menu-item-6">Link 6</a></li>
<li data-menu="item-7"><a id="lnk7" href="#" class="menu-item-7">Link 7</a></li>
<li data-menu="item-8"><a id="lnk8" href="#" class="menu-item-8">Link 8</a></li>
<li data-menu="item-9"><a id="lnk9" href="#" class="menu-item-9">Link 9</a></li>
<li data-menu="item-10"><a id="lnk10" href="#" class="menu-item-10">Link 10</a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="link-show container-menu" id="item-1">
<img src="http://via.placeholder.com/350x150" id="item-1">Link1
</div>
<div class="link-show container-menu" id="item-2">
<img src="http://via.placeholder.com/350x150" id="item-2">Link2
</div>
<div class="link-show container-menu" id="item-3">
<img src="http://via.placeholder.com/350x150" id="item-3">Link3
</div>
<div class="link-show container-menu" id="item-4">
<img src="http://via.placeholder.com/350x150" id="item-4">Link4
</div>
<div class="link-show container-menu" id="item-5">
<img src="http://via.placeholder.com/350x150" id="item-5">Link5
</div>
<div class="link-show container-menu" id="item-6">
<img src="http://via.placeholder.com/350x150" id="item-6">Link6
</div>
<div class="link-show container-menu" id="item-7">
<img src="http://via.placeholder.com/350x150" id="item-7">Link7
</div>
<div class="link-show container-menu" id="item-8">
<img src="http://via.placeholder.com/350x150" id="item-8">Link8
</div>
<div class="link-show container-menu" id="item-9">
<img src="http://via.placeholder.com/350x150" id="item-9">Link9
</div>
<div class="link-show container-menu" id="item-10">
<img src="http://via.placeholder.com/350x150" id="item-10">Link10
</div>
</div>
</div>
</div>

Is this what you want? Instead bind the function to a hover event, you need to bind it to a mouseover event, thus the content won't disappear if you mouse out a "li", but only change if you entering into another "li".
$('#menu-left li').on("mouseover", function() {
$("#" + $(this).data("menu")).show();
$("#" + $(this).data("menu")).siblings().hide();
});

You have one little problem in your code. When using the jQuery selector $("#menu-left li") you should not forget that here you are trying to select multiple DOM li elements by single call. Therefore you have to loop through them in order to be able to apply your desired effect to each one of them.
If this is understood the working code should look like this:
$('#menu-left li').each(function(i,e){
$(e).hover(
function() {
$("#" + $(this).data("menu")).show();
},
function() {
$("#" + $(this).data("menu")).hide();
}
);
});
Also, don't forget to pre-set the 'display' CSS properties of your div elements to 'none' by default.

Change class of list of li elements

I tried for changing the class name of li with class each_feature to each_feature--display.On each click of load more I need to change class for next 3 li inside ul.
But the below javascript is not working for me. On load I called load_more.display_items() this also doesn't work.
Someone please help me to make this work
<div class="export">
<section class="container">
<h2> Components Identified by scanner</h2>
<ul class="components_features">
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<a class="link" onclick="load_more.show_more_items()">
<span >Load more ...</span>
</a>
<hr>
</section>
</div>
Javascript:
var load_more = {
el: $('.export .components_features'),
list_index: 3,
display_items: function() {
if((this.list_index + 3) > this.el.find('.each_feature').length) {
this.el.find('.each_feature').addClass('each_feature--display');
}
this.el.find('.each_feature:lt(' + this.list_index + ')').addClass('each_feature--display');
},
show_more_items: function() {
this.list_index += 3;
this.display_items();
}
}

Something like this? Made in pure JS. For the a tag, you might want to prevent default link action if you are going to put a href.
<html>
<head>
<style>
.feature{
display: none;
}
</style>
<script>
function loadMore(){
features = document.getElementsByClassName("feature");
if(features.length > 0){
var count = 0;
while(features.length && count < 3){
count++;
features[0].className = "featureDisplay";
}
}
}
</script>
</head>
<body>
<ul>
<li class="feature">
1
</li>
<li class="feature">
2
</li>
<li class="feature">
3
</li>
<li class="feature">
4
</li>
<li class="feature">
5
</li>
<li class="feature">
6
</li>
<a onclick="loadMore()">Load more ...</a>
</ul>
</body>
</html>
The problem with using a for loop is that the value returned is a node list list which is a live object and it messes up the array when you modify a class. Read more about it here: javascript changes one some class names

on the 'load more' do this
$(".each_feature").addClass('each_feature--display');
$(".each_feature--display").removeClass('each_feature');
Of course you will have to adapt the code

How to search for clicked element src attribute and add it to another jquery

I am working with TB and trying to find solution to combine carousel and modal feature. I know that carousel gallery already exists in ver.3 but I am still working in 2.3 for some reason.
The problem is when user clicks on the carousel on the page it appears modal window and starts to slide images from the begining and not from the current (clicked) image.
Idea is to find that src attribute of clicked element and pass it over to element within modal window. Any ideas how to do that? Thanks! Here is html structure.
<!-- Modal -->
<div id="modal-trigger" class="modal hide fade modal-trigger slide" aria-hidden="true">
<div class="modal-header">
<div class="num"></div>
<button class="close" data-dismiss="modal">Schließen</button>
</div>
<div class="modal-body">
<div id="myCarousel2" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class=" active"> </li>
<li data-target="#myCarousel2" data-slide-to="1" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="2" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="3" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="4" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="5" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="6" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="7" class=""> </li>
<li data-target="#myCarousel2" data-slide-to="8" class=""> </li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1_big.jpg" alt="" />
</div>
<div class="item">
<img src="img/2.jpg" alt="" />
</div>
<div class="item">
<img src="img/3.jpg" alt="" />
</div>
<div class="item">
<img src="img/4.jpg" alt="" />
</div>
<div class="item">
<img src="img/5.jpg" alt="" />
</div>
<div class="item">
<img src="img/6.jpg" alt="" />
</div>
<div class="item">
<img src="img/7.jpg" alt="" />
</div>
<div class="item">
<img src="img/8.jpg" alt="" />
</div>
<div class="item">
<img src="img/9.jpg" alt="" />
</div>
</div>
<a class="left carousel-control" href="#myCarousel2" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel2" data-slide="next">›</a>
</div>
</div>
</div>
Here is my test js code made for that:
$('.carousel').on('slide', function(e) {
// var slideFrom = $(this).find('.active').index();
// var slideTo = $(e.relatedTarget).index();
var clickedItem = $(this);
var replacedItem = $('#myCarousel2 .carousel-inner .item.active');
$(clickedItem).click(function() {
$(this).attr({
src: $(this).attr('src'),
'src': $(this).attr('src')
})
console.log("it should replace element src value");
});
// console.log(slideFrom+' => '+slideTo);
});
Something similar I am trying to achive but only with Twitter Bootstrap 2.3
http://bootdey.com/snippets/view/Bootstrap-Gallery-with-Modal-Lightbox-and-Carousel-114
**This code helped me to open almost the right image in modal window, but unfortunately it picks up allways the image with +1 number of img-data. Does anyone has solution to pick just the right image which in this case is one number lower? **
$('#myCarousel .item a').on('click', function() {
$('#modal-trigger').carousel(parseInt($(this).children().attr("data-id")));
console.log("Code works");
});

try to use trigger click on indicator corresponding to the clicked element (using index or id)
$('.carousel .someitem').on('click', function() {
var index = $(this).attr('index'); // or other (what you want)
$('#modal-trigger .carousel-indicators:eq('+index+')').trigger('click');
});
Something like this.
It's not tested.

And the answer is:
$('#myCarousel .item a').on('click', function() {
var goTo = parseInt($(this).children().attr("data-id"), 10) - 1;
if(goTo < 0)
goTo = 0;
$('#modal-trigger').carousel(goTo);
console.log("Code works");
});

Changing pictures by clicking on a text

I have a text on a list
<ul class="1">
<li class="liHEADER">ANIMALS</li>
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
and I have a <div> for the pictures and the labels
<div class="show">
<div class="pic"><img src="LION.jpg"></pic>
<div class="labels">LION</div>
<div class="pic"><img src="LION.jpg"></pic>
<div class="labels">TIGER</div>
<div class="pic"><img src="LION.jpg"></pic>
<div class="labels">CHEETAH</div>
</div>
what I was intending to do is when I click on the word LION the <div> will show the picture of the lion and its label and then, when clicked on the tiger the lion pic and label will be hidden and the tiger will be shown...any javascript or jquery command for this?
I'm sorry I just not very good at this.

Yet another solution :)
Js Fiddler Demo here
HTML
<ul class="1">
<li class="liHEADER">ANIMALS</li>
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
<div class="show">
<div class="pic" data-name="lion"><img src="http://rs183.pbsrc.com/albums/x46/rebelrhoads/Lion.jpg~c200"/></div>
<div class="labels" data-name="lion">LION</div>
<div class="pic" data-name="tiger"><img src="http://www.perthzoo.wa.gov.au/wp-content/uploads/2011/06/Sumatran-Tiger.jpg"/></div>
<div class="labels" data-name="tiger">TIGER</div>
<div class="pic" data-name="cheetah"><img src="http://blog.londolozi.com/wp-content/uploads/2013/11/thumb-cheetah.jpg"/></div>
<div class="labels" data-name="cheetah">CHEETAH</div>
</div>
CSS
li{
color:#999;
cursor:pointer;
}
li.selected{
color:#000;
}
li:hover{
color:#000;
}
div.pic, div.labels{
display:none;
}
JavaScript
$(function(){
$('li').click(showAnimal);
});
function showAnimal(){
$('li').removeClass('selected');
$(this).addClass('selected');
var animal = $(this).text();
if(animal.toString().toLowerCase() == "animals")
$('div[data-name]').show();
else{
$('div.pic').hide();
$('div.labels').hide();
$('div[data-name=' + animal.toString().toLowerCase() + ']').show();
}
}

This is my idea:
html
<div class="show">
<div class="pic lion"><img src="LION.jpg"></pic>
<div class="labels lion">LION</div>
<div class="pic tiger"><img src="LION.jpg"></pic>
<div class="labels tiger">TIGER</div>
<div class="pic cheetah"><img src="LION.jpg"></pic>
<div class="labels cheetah">CHEETAH</div>
</div>
javascript
$(function(){
$('.animalss').click(function(){
switch($(this).text()){
case 'LION':
$('.pic').not('.lion').hide();
$('.labels').not('.lion').hide();
$('.lion').show();
break;
case 'TIGER':
$('.pic').not('.tiger').hide();
$('.labels').not('.tiger').hide();
$('.tiger').show();
break;
case 'CHEETAH':
$('.pic').not('.cheetah').hide();
$('.labels').not('.cheetah').hide();
$('.cheetah').show();
break;
}
});
});

Try this
HTML
<label>ANIMALS</label>
<ul class="1">
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
<div class="show">
<div class="lion" style="display:none">
<div class="pic"><img src="LION.jpg"></div>
<div class="labels">LION</div>
</div>
<div class="tiger" style="display:none">
<div class="pic"><img src="LION.jpg"></div>
<div class="labels">TIGER</div>
</div>
<div class="cheetah" style="display:none">
<div class="pic"><img src="LION.jpg"></div>
<div class="labels">CHEETAH</div>
</div>
</div>
Jquery Script
$('ul li').on('click',function(){
var text=$(this).text().toLowerCase();
$('.'+text).show('slow').siblings().hide();
});
DEMO

//check the solution on fiddle DEMO
http://jsfiddle.net/5Ks5n/
html
<ul class="animal-list">
<li class="liHEADER" data-view="lion">Lion</li>
<li class="animalss" data-view="tiger">Tiger</li>
</ul>
<div class="show">
<div class="pic" style="display:none" data-animal="lion">
<img src="http://3.bp.blogspot.com/-OiigZsVwwNQ/UFM5KDugeiI/AAAAAAAAJ_Y/HrPEPFnSXCI/s1600/Male+Lion+Wallpapers+1.jpg" />
<div class="labels">LION</div>
</div>
<div class="pic" style="display:none" data-animal="tiger">
<img src="http://3.bp.blogspot.com/-OiigZsVwwNQ/UFM5KDugeiI/AAAAAAAAJ_Y/HrPEPFnSXCI/s1600/Male+Lion+Wallpapers+1.jpg" />
<div class="labels">TIGER</div>
</div>
</div>
Javascript
$(document).on("click",".animal-list",function(element){
var $target = $(element.target);
var animal = $target.attr("data-view");
$(".pic").hide();
$("[data-animal='"+ animal +"']").show();
});

Simple approach:
<label>ANIMALS</label>
<ul class="1">
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
<div class="show">
<div class="lion_pic" style="display:none">
<img src="LION.jpg"></pic>
<label>LION</label>
</div>
<div class="tiger_pic" style="display:none">
<img src="TIGER.jpg"></pic>
<label>TIGER</label>
</div>
<div class="cheetah_pic" style="display:none">
<img src="CHEETAH.jpg"></pic>
<label>CHEETAH</label>
</div>
</div>
JS Code:
$('ul.1').click(function(e){
var type = $(e.target).text();
if(type === 'LION'){
$('.lion_pic').show();
$('.tiger_pic').hide();
$('.cheetah_pic').hide();
} else if(type === 'TIGER'){
$('.tiger_pic').show();
$('.lion_pic').hide()
$('.cheetah_pic').hide()
} else {
$('.cheetah_pic').show();
$('.lion_pic').hide()
$('.tiger_pic').hide()
}
});

The easiest but not shortest way to do this to assign classes to a group, group mean elements wich are interact with each oter i.e. lion text, image and lable in your case. Then use this code:
<pre>
<style>
.show div{display:none;}
</style>
<ul class="1">
<li class="liHEADER">ANIMALS</li>
<li class="animalss" id = "lion" onclick="showImage(this.id);">LION</li>
<li class="animalss" id = "tiger" onclick="showImage(this.id);">TIGER</li>
<li class="animalss" id="cheetah" onclick="showImage(this.id);">CHEETAH</li>
</ul>
<div class="show">
<div class="pic lion"><img src="LION.jpg"></pic>
<div class="labels lion">LION</div>
<div class="pic tiger"><img src="LION.jpg"></pic>
<div class="labels tiger">TIGER</div>
<div class="pic cheetah"><img src="LION.jpg"></pic>
<div class="labels cheetah">CHEETAH</div>
</div>
</pre>
Then jQuery will be
<pre>
<script>
function showImage(param){
var classToShow = param;
$('.'+param).show();
$('.show div:not("."'+param+'")').hide();
}
</script>
</pre>
Check for syntex error and let me know about it.

I have reformatted your HTML so that its much easier to illustrate since I think maybe you are able to change the HTML of your site. This is perhaps how most people write code for Tabs.
<ul>
<li class="animals">LION</li>
<li class="animals">TIGER</li>
</ul>
<div class="content">
<div class="pic" id="lion">
<img src="LION.jpg" />
<div class="labels">LION</div>
</div>
<div class="pic" id="tiger">
<img src="TIGER.jpg" />
<div class="labels">TIGER</div>
</div>
</div>
and here is the jQuery code,
$(".pic").hide();
$("a[href='#lion']").on('click', function() {
$(".pic").hide();
$("#lion").show();
});
$("a[href='#tiger']").on('click', function() {
$(".pic").hide();
$("#tiger").show();
});
everytime we reload the page, we make sure the are hidden using $(".pic").hide(). Then when the user clicks LION or TIGER links, we will hide both and then show only the correct div, which is either LION or TIGER. Here is a Working Example. It is certainly possible to make the code even shorter by abstracting LION and TIGER to ANIMALS (or well, anything you want), but then it will be harder to understand for beginners.