Toggle all elements except the sub element of clicked one
Question
I need to toggle(show/hide) the <p> which is the sub-element of the clicked <li> , while all other <p> s should should hide. I was able to do this.
But clicking on the same element(which is now showing) does not hide. How to achieve this ?
$(document).ready(function(){ $("p").hide(); $("li").click(function(){ $("p").not(this).hide(200); $("p", this).toggle(200); }); });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <ul> <li><a>q1</a> <p>a1</p> </li> <li><a>q2</a> <p>a3</p> </li> <li><a>q3</a> <p>a3</p> </li> <li><a>q4</a> <p>a4</p> </li> </ul> </body> </html>
4 answers
solution1
2 ACCPTED 2016-02-24 07:34:50
You need to pass the p elements to be excluded to not() , you are now passing this which is referring to the li element
$(document).ready(function() { $("p").hide(); $("li").click(function() { var $ps = $("p", this).stop(true).toggle(200); $("p").not($ps).stop(true).hide(200); }); });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <ul> <li><a>q1</a> <p>a1</p> </li> <li><a>q2</a> <p>a3</p> </li> <li><a>q3</a> <p>a3</p> </li> <li><a>q4</a> <p>a4</p> </li> </ul> </body> </html>
solution2
0 2016-02-24 07:38:35
$(document).ready(function(){
$("p").hide();
$("li").click(function(){
$(this).find('p').toggle(200);
$(this).siblings('p').hide(200);
});
});
DEMO Try doing like this
solution3
0 2016-02-24 07:41:52
Use this simple logic :
$(document).ready(function(){
$("p").hide();
$("li").click(function(){
$("p").not(this).hide(200);
if($("p",this).is(":visible")){
$("p", this).hide(200);}
else{
$("p", this).show(200);}
});
});
Check this fiddle
solution4
0 2016-02-24 07:44:57
Change your jQuery code like
$(document).ready(function(){
$("p").hide();
$("li").click(function(){
$("p").not($(this).find("p")).hide(200);
$(this).find("p").toggle(200);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Toggle close all except one clicked
How to change all elements except clicked element?
How to hide all other elements when a sub-element of one is clicked
JavaScript iterate through class elements and select all except clicked element
Vue.js - change color for all elements except the element clicked
How to remove a class on all the other elements except on the element that was clicked
knockout click binding - block binding on all elements except clicked element
in JavaScript - select all elements with same class - except clicked one
Toggle class except on the current clicked element
How to toggle every jQuery element except the clicked?
Related Tags