I have the following sample code:
CODE HTML:
<ul>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item hidden"> item 1 </li>
<li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>
CODE CSS:
.hidden {
display: none;
}
.visible {
display: block;
}
CODE JS:
$('.button').on('click', function (e) {
var item = $('.item');
item.removeClass('hidden');
});
I want to add class .visible to the elements that previously had the .hidden class. Basically I want to hide the items again at the next click and be a toggle of classes.
How can I hide the last two items?
Thanks in advance!
You need to use .toggle()
$('.button').on('click', function (e) {
$('.hidden').toggle('visible');
});
Try this, no need of css, just .toggle() will do it.
$('.button').on('click', function (e) {
$('.hidden').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item hidden"> item 1 </li>
<li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>
Alternatively you can also use below approach:
CSS
.hidden {
display:none;
}
JQuery
$('.button').on('click', function (e) {
$('#anyElement').toggleClass('hidden');
});
You need to use switchClass to remove existing one and add second.
Alternatively, You can loop through each element on button click and remove/add the relevant classes.
$("button").click(function(){
$("li").each(function(){
let $this = $(this);
if($this.hasClass('hidden')){
$this.removeClass("hidden").addClass("visible");
} else if($this.hasClass('visible')){
$this.removeClass("visible").addClass("hidden");
}
})
})
.hidden {
display: none;
}
.visible {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item hidden"> item 1 </li>
<li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>
Related
I have a struture of html like below,This is what there will be list of option
<div class='col-sm-4'>
<div id='selectiondata' class="panel panel-default">
<div class="panel-body">
<h2 class='headerText'>Selections</h2>
<p style="font-size: 14px;">Select only that apply to you.</p>
<ul>
<li id="item1" data-cat="fruits">Banana</li>
<li id="item2" data-cat="fruits">Pineapple</li>
<li id="item3" data-cat="fruits">Oragne</li>
<li id="item4" data-cat="fruits">MAngo</li>
<li id="item5" data-cat="Vegetables">Beans</li>
<li id="item6" data-cat="fruits">jackfruit</li>
<li id="item7" data-cat="Vegetables">carrot</li>
</ul>
</div>
</div>
</div>
From above div when user clicks it moves to adjacent div,this has a sturcture like below.
<div id="categories" class="panel-default">
<div class="panel-body">
<div class="alert alert-info hidden endMsg">Your data categorized. Once done, click the next button to continue.</div>
<h2 class='headerText'>Categories</h2>
<ul>
<li id="cat-fruits">
<span>fruits</span>
<ul>
<li id="item5" data-cat="fruits">MAngo</li>
<li id="item1" data-cat="fruits">Banana</li>
<li id="item3" data-cat="fruits">Oragne</li>
<li class="no-expenses" style="display: none;">No items selected</li>
</ul>
</li>
<li id="cat-Vegetables">
<span>Vegetables</span>
<ul>
<li id="item4" data-cat="Vegetables">Beans</li>
<li class="no-expenses" style="display: none;">No items selected</li>
</ul>
</li>
<li id="cat-dolls">
<span>dolls</span>
<ul>
<li class="no-expenses">No items selected</li>
</ul>
</li>
<li id="cat-medical">
<span>Medical</span>
<ul>
<li class="no-expenses">No items selected</li>
</ul>
</li>
</ul>
</div>
</div>
jquery function to fetch array of data
function saveData() {
userData = [];
$('#categories ul li ul li.selected').each(function(index, element) {
if ($.inArray($(this).text(), userData) < 0) {
userData.push($(this).html());
}
});
I want to fetch datas like
[MAngo,banana,Oragne,beans]
Here i will be having two divs,one div shows list of selection as shown in below figure, when user click on particular elemnet, that elemnet will be moved to next adjacent div(categories).I want to get this datas.
----------- ----------
|Banana | | MAngo |
|Pineapple | | Banana |
|Oragne | | Oragne |
|MAngo | | Beans |
|Beans | |_________|
|jackfruit |
|carrot |
-----------
The above jquery used is not fetching any data from html, How could i acheive this. Please help me.
Would it be easier to add each item to the array when that item is clicked (and doesn't exist yet in the array)?
var arr = [];
$("#categories [id^=item]").click(function() {
if(arr.indexOf($(this).html())<0) arr.push($(this).html());
})
console.log(arr);
If you want to use data attr in #nicael code use
var arr = [];
$("#categories").data("cat").each(function() {
arr.push($(this).html());
})
console.log(arr);
var arr = [];
$('li[data-cat]').each(function() {
arr.push($(this).html());
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories" class="panel-default">
<div class="panel-body">
<div class="alert alert-info hidden endMsg">Your data categorized. Once done, click the next button to continue.</div>
<h2 class='headerText'>Categories</h2>
<ul>
<li id="cat-fruits">
<span>fruits</span>
<ul>
<li id="item1" data-cat="fruits">Mango</li>
<li id="item2" data-cat="fruits">Banana</li>
<li id="item3" data-cat="fruits">Oragne</li>
<li class="no-expenses" style="display: none;">No items selected</li>
</ul>
</li>
<li id="cat-Vegetables">
<span>Vegetables</span>
<ul>
<li id="item4" data-cat="Vegetables">Beans</li>
<li class="no-expenses" style="display: none;">No items selected</li>
</ul>
</li>
<li id="cat-dolls">
<span>dolls</span>
<ul>
<li class="no-expenses">No items selected</li>
</ul>
</li>
<li id="cat-medical">
<span>Medical</span>
<ul>
<li class="no-expenses">No items selected</li>
</ul>
</li>
</ul>
</div>
</div>
I have a menu which list items which display the the content on the other list.
MENU
<ul id="gallery-list" style="display: none;">
<li class="close"></li>
<li data-id="9425"><strong>item 1</strong></li>
<li data-id="9426"><strong>item 2</strong></li>
<li data-id="9488"><strong>item 3</strong></li>
<li data-id="9489"><strong>item 4</strong></li>
<li data-id="9495"><strong>item 5</strong></li>
<li data-id="9427"><strong>item 6</strong></li>
</ul>
CONTENT:
<ul id="gallery-container">
<li data-id="9425">
<h3 style="display: none;">Item 1</h3>
<div class="content">Content here</div>
</li>
<li data-id="9426">
<h3 style="display: none;">Item 2</h3>
</li>
<li data-id="9488">
<h3 style="display: none;">Item 3</h3>
</li>
<li data-id="9489">
<h3 style="display: none;">Item 4</h3>
</li>
<li data-id="9495">
<h3 style="display: none;">Item 5</h3>
<div class="content">Content here</div>
</li>
<li data-id="9427">
<h3 style="display: none;">Item 6</h3>
<div class="content">Content here</div>
</li>
</ul>
In the content some have .content in the li. How can I use the data-id in that to hide the item in the menu section? Basically items in the menu should only be display if it has a .content
OUTPUT of the MENU should be like this.
<ul id="gallery-list" style="display: none;">
<li class="close"></li>
<li data-id="9425"><strong>item 1</strong></li>
<li data-id="9495"><strong>item 5</strong></li>
<li data-id="9427"><strong>item 6</strong></li>
</ul>
Or this should be okay too.
<ul id="gallery-list" style="display: none;">
<li class="close"></li>
<li data-id="9425"><strong>item 1</strong></li>
<li data-id="9425" style="display:none;"><strong>item 2</strong></li>
<li data-id="9425" style="display:none;"><strong>item 3</strong></li>
<li data-id="9425" style="display:none;"><strong>item 4</strong></li>
<li data-id="9495"><strong>item 5</strong></li>
<li data-id="9427"><strong>item 6</strong></li>
</ul>
Take not that Item in the content are always display:none; onload trigger.
Also using this script:
$("#gallery-list li").click(function() {
var id = $(this).data('id');
$("#gallery-container").find('li').each(function() {
$(this).find('.content').toggle($(this).data('id') === id);
$(this).find('h3').toggle($(this).data('id') === id);
});
});
window.onload = function () {
$("#gallery-container li .content").css("display", "none");
$("#gallery-container li h3").css("display","none");
$("#gallery-container li p").css("display","none");
}
$('.gallery-menu h3, #gallery-list li').click(function(){
$("#gallery-list, .gallery-menu h3").toggle();
});
This controls the contents of the list also activate the menu.
My frist idea:
Loop the content list items and when no .content is available inside, remove the related menu item.
$(function() {
$("#gallery-container li[data-id]").each(function() {
if( $(".content", this).length == 0 ) {
$("#gallery-list li[data-id=" + $(this).data("id") + "]").remove();
}
});
});
As #XerenNarcy noticed in the comments, you can even use a not() and has() combined selector:
$(function() {
$("#gallery-container li[data-id]:not(:has(.content))").each(function() {
$("#gallery-list li[data-id=" + $(this).data("id") + "]").remove();
});
});
Instead of remove() you yould even use hide().
Working example.
I have a click handler on the "top level" <li>s that I want to hide all the content below the <li>s and then show the content below the particular <li> that was clicked.
The hiding works, but the showing does not.
$('.menu li').click(function() {
$('.submenu').hide();
var myclass = $('submenu');
$(this).show($submenu)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football
</li>
<li>cricket
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<li>Hockey
</li>
<li>Baseball
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
Try this.
It hides the submenu with CSS.
Then it toggles the submenu when you click the list item.
If you only want one submenu to be shown at once, uncomment the line in the js.
$('.menu li').has('.submenu').click(function(e) {
e.preventDefault();
$(this).find('.submenu').slideToggle();
});
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
You should try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
<script type="text/javascript">
$('.submenu').hide();
$(document).on("click",".menu li",function(){
$(this).find('.submenu').slideToggle();
});
</script>
You are using jQuery and there is toggle() function for show/hide toggle and use like this
$('.submenu').toggle();
and I fixed your script that doesn't work.
$('.menu li').click(function(){
$('.submenu').hide();
$(this).find('.submenu').show();
});
Working fiddle
I have a menu that has 3 list options. Inside each of these list options there is another unordered list that has 2 list options inside.
Inside the unordered list with two options the first list item is an image and the second is a link.
When the user clicks one of the links, I want that current whole group(consisting of the image and the link) to stay showing while the other 2 menu options disappear.
I am having trouble coming up with the right selection.
$('.menu ul>li>ul>li:last-child>a').click(function() {
var currentLink = $(this);
var currentGroup = $(this).closest('li').closest('li');
$('.menu ul>li').not(currentGroup).hide();
});
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul class="main-menu">
<!--This is the first link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link One</li>
</ul>
<!--This is the second link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link Two</li>
</ul>
</li>
<!--This is the third link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link Three</li>
</ul>
</li>
</ul>
</div>
The problem is $('.menu ul>li') which selects all li including the second level one's.
So try
$('.menu ul ul li:last-child > a').click(function() {
var currentGroup = $(this).closest('.menu > ul > li');
$('.menu > ul > li').not(currentGroup).hide();
});
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul class="main-menu">
<!--This is the first link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link One
</li>
</ul>
<!--This is the second link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link Two
</li>
</ul>
</li>
<!--This is the third link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link Three
</li>
</ul>
</li>
</ul>
</div>
What I have are multiple links in my nav bar but am having changing the ul class.
There are just two of my buttons on this page I need to change the ul class form select to current and the current to select.
<div class="nav">
<ul class=" current">
<li>
Home
<div class="select_sub">
<ul class="sub">
<li></li>
</ul>
</div>
</li>
</ul>
<ul class=" select">
<li>
About
<div class="select_sub">
<ul class="sub">
<li>About Us</li>
<li>What are we</li>
</ul>
</div>
</li>
</ul>
</div>
$(document).ready(function() {
$('.select').click(function () {
$('.current').removeClass('current').addClass('select');
});
});
You have lot of syntax errors .There is no need of using quotes for this and you missed ; at the end
replace
$('this').removeClass('select')
with
$(this).removeClass('select');
or use
$(this).removeClass('select'.)addClass("current");
$(document).ready(function() {
$('.current').click(function(){
$(this).removeClass('select'.)addClass("current");
});
});