List.js finds the element but still keeps others too

List.js finds the element but still keeps others too - javascript

its my first time using List.js. I have the following structure:
var options = {
valueNames: ['name']
};
var coursesList = new List('courses-list', options);
coursesList.on('updated', function(list) {
console.info(list.matchingItems);
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="courses-list">
<input class="search">
<div id="collectionView" class="list">
<div class="row1">
<div class="large-6 small-12 columns" >
<a href="link/to/somewhere" target="_blank">
<span class="name">Demokurs Französisch A2 Online</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns" >
<a href="link/to/somewhere" target="_blank">
<span class="name">Französisch</span>
<p class="description">blabla</p>
</a>
</div>
</div>
<div class="row2">
<div class="large-6 small-12 columns" >
<a href="link/to/somewhere" target="_blank">
<span class="name">Kurs A</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns" >
<a href="link/to/somewhere" target="_blank">
<span class="name">Kurs B<span>
<p class="description">blabla</p>
</a>
</div>
</div>
</div>
</div>
Well now if I search for the term A2 it show correctly the content of the firstdiv in row1 BUT also the second div with all of its content. List.js hides row2 as wished.
How can I make it work that it also hides all other divs in a row?
I have also checked if really only matching is there with:
coursesList.on('updated', function(list) {
console.info(list.matchingItems);
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
})
The logs show that list.matchingItems finds only object.

List.js isn't designed to work this way, it doesn't support nested lists, it only counts a list item down 1 level, so its sees the whole of the <div class="row1"> as a single list item and <div class="row2"> as another.
If you want it to work properly I suggest removing the <div class="row1"> and<div class="row2"> so that all the relevant <div> are at the same level. Like shown below:
var options = {
valueNames: ['name']
};
var coursesList = new List('courses-list', options);
coursesList.on('updated', function(list) {
console.info(list.matchingItems);
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="courses-list">
<input class="search">
<div id="collectionView" class="list">
<div class="large-6 small-12 columns">
<a href="link/to/somewhere" target="_blank">
<span class="name">Demokurs Französisch A2 Online</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns">
<a href="link/to/somewhere" target="_blank">
<span class="name">Französisch</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns">
<a href="link/to/somewhere" target="_blank">
<span class="name">Kurs A</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns">
<a href="link/to/somewhere" target="_blank">
<span class="name">Kurs B</span>
<p class="description">blabla</p>
</a>
</div>
</div>
</div>
If you absolutely require the nested lists then you should instead use jQuery, in a similar way to this question and not use List.js.

Related

if the class is active, reinstate the other with jquery

I want to update the comments of a post. Let's say the user has 2 comments, when he clicks edit I want to close the window of the other comment. In short, how can I keep one as "textarea" and the other as "span"?
$(document).on('click','.update-comment',function(e){
$('.active').removeClass('active');
let obj = $(this).closest('.comments');
let text = obj.find('.comment-text').attr('data-text');
obj.find('.ms-3').addClass('active');
if($('.ms-3').hasClass('active')){
$(obj.find('.comment-text')).replaceWith('<textarea id="updateComment">'+text+'</textarea>');
}else {
$(obj.find('.comment-text')).replaceWith('<span class="comment-text" data-text='+text+'>'+text+'</span>');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex py-2 comments" data-id="1">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/50" alt="..."/>
</div>
<div class="ms-3">
<div class="fw-bold">Name-1
<button type="submit" class="update-comment" data-id="1">Edit</button>
</div>
<span class="comment-text" data-text="Comment Example - 1" data-id="1">Comment Example - 1</span>
</div>
</div>
<hr>
<div class="d-flex py-2 comments" data-id="2">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/100" alt="..."/>
</div>
<div class="ms-3">
<div class="fw-bold">Name-2
<button type="submit" class="update-comment" data-id="2">Edit</button>
</div>
<span class="comment-text" data-text="Comment Example - 2" data-id="2">Comment Example - 2</span>
</div>
</div>
<hr>

Not trivial
I changed the button to type=button
I then removed the duplicate IDs and instead gave both span and textarea the class of comment-text
Then I changed the data-attr to just the .text() OR .val() depending on the element being a textarea or a span
I also cached several objects
$(document).on('click', '.update-comment', function(e) {
$allMS3 = $('.ms-3').removeClass('active');
let $thisMS3 = $(this).closest('.ms-3')
.addClass('active');
$allMS3.each(function() {
const $commentText = $(this).find('.comment-text')
let text = $commentText.is("span") ? $commentText.text() : $commentText.val();
if ($(this).hasClass('active')) {
$commentText.replaceWith('<textarea class="comment-text">' + text + '</textarea>');
} else {
$commentText.replaceWith('<span class="comment-text">' + text + '</span>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex py-2 comments" data-id="1">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/50" alt="..." />
</div>
<div class="ms-3">
<div class="fw-bold">Name-1
<button type="button" class="update-comment" data-id="1">Edit</button>
</div>
<span class="comment-text" data-text="Comment Example - 1" data-id="1">Comment Example - 1</span>
</div>
</div>
<hr>
<div class="d-flex py-2 comments" data-id="2">
<div class="flex-shrink-0">
<img src="https://via.placeholder.com/100" alt="..." />
</div>
<div class="ms-3">
<div class="fw-bold">Name-2
<button type="button" class="update-comment" data-id="2">Edit</button>
</div>
<span class="comment-text" data-text="Comment Example - 2" data-id="2">Comment Example - 2</span>
</div>
</div>
<hr>

Display no results message for input filtering a list of cards

I have an input field which is filtering a list of cards.
I can't seem to figure out how to display a message when all the div's are assigned the class display-none. Is their a way to check if any of the div's inside a parent div contain a class? Maybe I am approaching this incorrectly. Thanks for your help!
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
let cards = cardContainer.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
let noResults = document.getElementById("no-results");
let title = cards[i].querySelector(".card-content div.card-title");
if (title.innerText.toUpperCase().indexOf(input) > -1) {
cards[i].classList.remove("display-none");
cards[i].classList.add("displaying");
} else {
cards[i].classList.add("display-none");
cards[i].classList.remove("displaying");
checkDisplay();
}
}
function checkDisplay() {
let noResults = document.getElementById("no-results-message");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("displaying")) {
console.log("something");
} else {
console.log("no cards are displaying");
}
}
}
}
.display-none {
display: none;
}
.displaying {
display: block;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>

Changing display only with .display-none in css works more clearly
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
const cards = document.querySelectorAll(".card");
[...cards].map((card) => {
const noResults = document.getElementById("no-results");
const title = card
.querySelector(".card-content div.card-title")
.innerText.toUpperCase();
title.includes(input)
? card.classList.remove("display-none")
: card.classList.add("display-none");
checkDisplay();
});
function checkDisplay() {
const noResults = document.getElementById("no-results");
const result = [...cards].filter((card) =>
card.classList.contains("display-none")
);
cards.length === result.length
? noResults.classList.remove("display-none")
: noResults.classList.add("display-none");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("display-none")) {
console.log("no cards are displaying");
} else {
console.log("something");
}
}
}
}
.display-none {
display: none;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>

How do I select data from element with onclick listener?

I'm currently working on a web application that has to function as some sort of webshop later on. I'm now working on an addToCart function, that has to pick certain data from the clicked element (the name and the price of the product, and add 1 to pcs and save everything to a session), and paste these 2 values into a template I've made and place this in the shopCart. I'm now trying to print out the 2 values I've just mentioned, but I'm stuck now.
This is the current javascript code I've made for loading in all the products, and my attempt on showing some of the values of the clicked items:
$(function(){
$.getJSON("assets/products/sample_products.json", function(response) {
$.each(response.data, function (i, el) {
let card = $($('#productCard-template').html());
card.find('#cardName').html( el.name);
card.find('#cardPrice').html( '€' + el.price );
card.find('.productItem').attr('data-price', el.price)
.attr('data-article-number', el.article_number)
.attr('data-id', el.id)
.attr('data-name', el.name)
.attr('data-stock', el.stock)
.attr('data-categories', el.categories);
$('#touchViewProducts').append(card);
});
});
});
//onclick function adds data of product to the designated template
function addToCart(){
var value = document.getElementById("productCard").value;
var getDataVal = document.getElementById('productCard-template').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}
This is the html code of the templates:
<div class="row touchViewSection">
<!-- shopping sector -->
<!-- touchView -->
<!-- categories menu -->
<div class="col-3 categoriesSection">
<div class="categories">
<p style="background-color: white; margin-bottom: 0px" > Categories </p>
<a class="nav-link" id="all" href="#">All</a>
<a class="nav-link" id="knalvuurwerk" href="#">Knalvuurwerk</a>
<a class="nav-link" id="rotjes" href="#">Rotjes</a>
<a class="nav-link" id="siervuurwerk" href="#">Siervuurwerk</a>
</div>
</div>
<!-- categories menu -->
<!-- <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
<div class="col-9 productItems" >
<br>
<div class="row" id="touchViewProducts">
</div>
</div>
</div>
<!--/touchView -->
<!--Keyboard View -->
<div class="row keyboardViewSection">
<div class="col-12 keyboardViewRow">
<table id="data-table" class="table table-bordered" style="width: 100%;">
<thead id="tableHead">
<tr>
<th> # </th>
<th> Product name </th>
<th> Free Stock </th>
<th> Price </th>
<th> Action </th>
</tr>
</thead>
</table>
</div>
</div>
<!--/Keyboard View -->
<div class="footer">
<div class="container">
<p class="text-muted"> Developed by Vesta Group</p>
</div>
</div>
</div>
<!--/shopping sector-->
<div class="col-4 cartSection">
<!--cart-->
<div class="row">
<div class="col-5">Product</div>
<div class="col-1">Pcs.</div>
<div class="col-2">Price</div>
<div class="col-3">Total</div>
</div>
<hr style="background-color: white;">
<div id="output" class="row"></div>
<div class="row shopcardProducts" id="shopcartProducts">
</div>
<div class="row cartCheck">
<div class="col-5">Number of products</div>
<div class="col-1">1</div>
<div class="col-2">Subtotal</div>
<div class="col-3 total">€ 0,00</div>
<div class="col-5"></div>
<div class="col-1"></div>
<div class="col-2">Total </div>
<div class="col-3">€ 0,00</div>
</div>
<div class="row cartCheck">
<div class="col-12 checkoutBtn"> Checkout </div>
<div class="col-6 addDiscountBtn"> Add discount </div>
<div class="col-6 cancelBtn"> Cancel </div>
</div>
<!--buttons-->
<!--/cart-->
</div>
</div>
</div>
<script type="text/template" id="productCard-template">
<div class="col-3 productCard" id="productCard" onclick="addToCart()">
<a href="#" class="productItem">
<div class="card">
<img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
<div class="container">
<div class="row" style="height: 6vh; max-width: 20ch;">
<p id="cardName"> </p>
</div>
<div class="row" style="height: 50%">
<b><p id="cardPrice"></p></b>
</div>
</div>
</div>
</a>
</div>
</script>
<script type="text/template" id="shopcartRow-template">
<div class="row">
<div class="col-5" id="valueName"> </div>
<div class="col-1" id="valueQty"> </div>
<div class="col-2" id="valuePrice"> </div>
<div class="col-3" id="valueTotal"> </div>
</div>
</script>
Here's an image of what the web app looks like, I hope that could make it more clear.

Because addToCart() is a callback, you can use this to access its context (the caller element):
function addToCart(){
var value = $(this).val(); // what val you want to refer? there are no input in the template
var getDataVal = $(this).find('.productItem').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}

Toggle addclass with jquery parent selector

I have some items products in a grid.
I want that when i click on each icon from item, it will toggle a class '.active' and also remove class if others from others items are visible.
This is my script so far, can add the class remove from others items but when i click on the same icon it doesn't toggle it (remove the class).
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$('.items').find('.actions').not($this).removeClass('active');
$that.find('.actions').toggleClass('active');
});
<ul class="products-grid row">
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

You need to remove this row:
$('.items').find('.actions').not($this).removeClass('active');
Because in your function you first remove the class, and then toggle it. In this case, if the element already has active class, it will be removed first, and then toggle will add it again (it looks like the element still has an active class, because operations are very fast). I have removed the row as described above and added some styles to see the difference, so here is the working snippet (click on "Show Actions" to see the difference):
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$that.find('.actions').toggleClass('active');
});
.items #show-actions {
width: 100vw;
background-color: royalblue;
color: white;
}
.active {
background-color: red;
}
img {
width: 50px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

First, you can't have duplicate ID's on any HTML page. I suggest you change #show-actions to a class for the rather than an ID.
Second, you also have some extra quote marks in your img element.
Once you do that it's pretty simple.
$('.show-actions').on('click', function() {
var items = $('.items');
items.removeClass('active');
$(this).parent().parent('.items').addClass('active');
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

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.

We Keep Coding

JavaScript is the programming language of the Web.

List.js finds the element but still keeps others too - javascript

Related

if the class is active, reinstate the other with jquery

Display no results message for input filtering a list of cards

How do I select data from element with onclick listener?

Toggle addclass with jquery parent selector

Changing pictures by clicking on a text

Categories

Resources