I have this code and when i press the link with a element i want to hide the ul with class name tab and show the ul with class tab-1 without hidding the both of ul elements.I have tried with jquery but with no success. The jQuery code is the following.
$("a").click(function() {
$(".tab").hide("slide", {direction: "left"}, "slow");
$(".tab-1").show("slide", {direction: "left"}, "slow");
});
How can i do it?
<ul class="tab">
<li>
Link 1
<ul class="tab-1">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
</ul>
You can't show a child of an element that is set to display:none. If parent is not displayed...anything inside parent can't be either
However you can set visibility:hidden on parent and visibility:visible on descendants
.tab {visibility:hidden}
.tab-1 {visibility:visible}
Note that this is very uncommon practice. It would help to have a better description of what you want to acheive
DEMO
Just hide all elements that match .tab > li > a.
Demo :
.tab, .tab ul {
list-style-type: none;
}
.tab > li > a {
display : none;
}
<ul class="tab">
<li>
Link 1
<ul class="tab-1">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
</ul>
Related
here is the code, can someone help to modify?
(function($){
$(document).ready(function() {
// Categories menu opening
// Categories menu opening
$('.woocommerce.widget_product_categories .product-categories li.cat-parent').prepend('<div class="cat-menu-close"></div>');
$( document ).on( "click", ".woocommerce.widget_product_categories .product-categories li.cat-parent:not(.opened) > .cat-menu-close", function(e) {
$(this).parent().addClass('opened');
$(this).next().next('ul.children').slideDown();
});
}) (jQuery);
Can someone help me to modify
To "toggle" element's visibility with sliding effect, you could use slideToggle.
Note that you need to remove :not(.opened) from the selector, because the handler won't work when this parent element has this class.
$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function(e) {
var $catParent = $(this).closest('li.cat-parent');
var state = $catParent.hasClass('close');
$catParent.toggleClass('opened', !state);
$(this).nextAll('ul.children:first').slideToggle(state);
});
.cat-menu-close {
cursor: pointer;
}
ul {
list-style: none;
}
ul.children {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce widget_product_categories">
<div class="product-categories">
<ul>
<li class="cat-parent">
<span class="cat-menu-close">
<button>Expand/collapse</button>
</span>
<div>Random sibling element</div>
<ul class="children">
<li>Child item</li>
<li>Child item</li>
<li>Child item</li>
</ul>
</li>
</ul>
</div>
</div>
This is a really hard question to find a title for, but here is it.
I got this HTML, that I can't change
<ul>
<li>
First part of the list
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li>
Second part of the list
<ul>
<li>item 3</li>
</ul>
</li>
</ul>
And I'd like to apply things to the "first part of the list" and "Second part of the list" part, but not the nested ul part, like CSS transform scaleY, and a custom Jquery onClick method.
So, the solution I'd like would be a way to JQueryly add around those.
Is this possible?
Thank you a lot
To achieve this you can filter() the li contents() to retrieve the text nodes within it, then wrap that in a span and apply the needed CSS rules. Something like this:
$('#container > ul > li').each(function() {
var foo = $(this).contents().filter(function() {
return this.nodeType == 3 && this.textContent
}).wrap('<span />');
});
#container > ul > li > span {
color: red;
display: inline-block;
transform: scaleY(2);
margin: 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul>
<li>
First part of the list
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
<li>
Second part of the list
<ul>
<li>item 3</li>
</ul>
</li>
</ul>
</div>
I have this HTML code
<ul>
<li>link
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li>link
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
</ul>
now I want -> hide all sub menus -> if I click to main li element -> show current li's sub menu and next if I click to another main li element show sub menu and hide previously displayed sub menu.
Can anyone help me?
You can do it like this DEMO
$('li ul').hide();
$('li a').click(function() {
$(this).next('ul').slideToggle();
$('ul li ul').not($(this).next('ul')).slideUp();
});
You can do something simple like this with click event
$('#main>li>a').click(function() { // bind click event to a tag
$(this)
.next() // get ul inside
.stop() // stop any previous animation
.slideToggle() // toggle the visibility
.end() // back to previous selector , here the clicked element
.parent() // get parent li
.siblings() // get its siblings
.find('ul') // get ul inside them
.stop() // stop any previous animation
.slideUp() // hide them
});
#main>li>ul {
/* hide sub ul initially */
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="main">
<li>link
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</li>
<li>link
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</li>
</ul>
I want to create universal tree menu, with ul li ul. And I've made something like this using just CSS:
CSS
.category-list {
}
.category-list li ul {
display: none;
}
.category-list li:hover > ul {
display: block;
}
HTML
<ul class="category-list">
<li>
Category 1
<ul>
<li>Sub-category 1</li>
<li>Sub-cateagory 1</li>
<li>Sub-category 1</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
</ul>
</li>
</ul>
https://jsfiddle.net/usz9ycmj/1/
--
And I want to make similar effect, but on click, so just current clicked tab displays its parent content.
Even more important for me is the ability to add and remove class on specific action:
.category-list li.current -- while is currently clicked (active)
.category-list li -- removed while different li is clicked (active)
Just, the trigger li has two different states for active and inactive. It changes the colors and arrow from closed to opened to give it a look of a tree menu - I bet You get the point.
I want the simple jquery code, if someone has time to help. feel welcome.
Here is a working code.
Please read the comments and let me know if something not clear.
// listen to the click event
var all_items = $('.category-list>li').click(function(event) {
// stop the propagation - this will abort the function when you click on the child li
event.stopPropagation();
var elm = $(this);
// remove the class from all the items
all_items.not(elm).removeClass('current');
// add class if it's not the current item
elm.toggleClass('current', !elm.is('.current'));
});
.category-list {
}
.category-list li ul {
display: none;
}
.category-list li.current > ul {
display: block;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<ul class="category-list">
<li>
Category 1
<ul>
<li>Sub-category 1</li>
<li>Sub-category 1</li>
<li>Sub-category 1</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
</ul>
</li>
</ul>
http://jsbin.com/tocewe/edit?html,css,js
Could some one please help with code.
I want to show the submenu only when submenu parent is clicked.
HTML
<ul>
<li>Item</li>
<li>Item
<ul class="sub-menu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Item</li>
<li>Item
<ul class="sub-menu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Item</li>
</ul>
So if you click on the parent submenu will show.
Here is fiddle link - http://jsfiddle.net/KhNCV/1/
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).slideDown();
});
http://jsfiddle.net/3nigma/KhNCV/2/
OR
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
http://jsfiddle.net/3nigma/KhNCV/4/
Here's your example working. It's unclear why you need the a tags, as you could use cursor: pointer in the CSS to make the li appear clickable. I'll assume you want to do some spiffy hovering on them in IE that's CSS only? If not, you could simplify by removing them.
Instead of doing hide() on .submenu, you should use CSS (parsed with DOM instead of onReady/load).
.sub-menu { display: none; }
And then here's you code to toggle the menus:
$('ul li a').click(function() {
$(this).parent().find('ul.sub-menu').toggle();
return false;
});
$('.sub-menu').hide();
$("a").click(function(){
$(this).parent().children("ul").toggle();
})
check out this link
http://jsfiddle.net/KhNCV/6/
$('li a').click(
function() {
$(this).next().slideToggle();
})
Try this
$(function(){
//Hide all the sub menus
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
//Find the child ul and slideToggle
$(this).children("ul").slideToggle();
});
});