How do l toggle the id="tree" when any of the class="folder" is clicked? My implementation is not working. It keeps toggling only the first item no matter which class="folder" I click. Thanks for your help
<div class="main">
<ul class="collections>
<li class="listitem1">
<span class="folder"> folder </span>
<div id="tree">
//...THIS IS WHERE THE CONTENT IS
</div>
</li>
<li class"listitem2">
<span class="folder"> folder </span>
<div id="tree">
//...THIS IS WHERE THE CONTENT IS
</div>
</li>
</ul>
</div>
JS
$(document).ready(function() {
$('#tree').slideToggle("fast");
$('.folder').click(function() {
$('#tree').slideToggle("fast");
});
});
There are id should be unique.
And there are some typo in your html code also. Like = sign is not there after class. And you forget to close the quote.
Use following JQuery.
$(this).siblings("div").slideToggle("fast");
Working Fiddle
$('.tree').slideToggle("fast");
$('.folder').click(function() {
$(this).parent().find('.tree').slideToggle("fast");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<ul class="collections">
<li class="listitem1">
<span class="folder"> folder </span>
<div class="tree">
THIS
</div>
</li>
<li class="listitem2">
<span class="folder"> folder </span>
<div class="tree">
THIS IS WHERE THE CONTENT IS
</div>
</li>
</ul>
</div>
Try using .parent() and then .find() to get the class tree
Please change the ID in to a class, because ID is unique. Its not allowed same multiple ID name in a document.
$(document).ready(function() {
$('.tree').hide();
$('.folder').click(function() {
$(this).parent().find('.tree').slideToggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<ul class="collections">
<li class="listitem1">
<span class="folder"> folder </span>
<div class="tree">
//...THIS IS WHERE THE CONTENT IS
</div>
</li>
<li class="listitem2">
<span class="folder"> folder </span>
<div class="tree">
//...THIS IS WHERE THE CONTENT IS
</div>
</li>
</ul></div>
Related
I have this super easy JS that does one thing; namely toggles an open class on a specific element in the page. Problem is that I have 4 repetitions of both the .clickSlide element and the .sub_menu element and when I click one of the elements to trigger the code all elements gets the open class. Only the element of concern, out of the 4, should get the open class.
My best guess is I am missing some sort of this in the JS. But I am open to solutions on this one!
jQuery(document).ready(function($) {
$(".clickSlide").click(function() {
$(".sub_menu").toggleClass("open");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ht_course_one">
<ul class="select-menu dropdown">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_two">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_three">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_four">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
So the solution (based on Anass Kartit answer) was this:
jQuery(document).ready(function($) {
$(".clickSlide").click(function(){
$(this).children(".sub_menu").toggleClass("open");
});
});
I tried the other solutions on stackoverflow but they did not work.
The navbar or the banner code is so complex and I can not implement the other solutions.
I want to delete this navbar from all the files (mobile and desktop version) and addd it to a separate HTML file so I can reach from other websites files.
The idea I want to do is, I don't want to change the menu items from every file. Just want to do once.
<!-- Header desktop -->
<div class="container-menu-desktop">
</div>
<!-- Header Mobile -->
<div class="wrap-header-mobile">
<!-- Logo mobile -->
<div class="logo-mobile">
<img src="images/icons/logo-01.png" alt="IMG-LOGO">
</div>
<!-- Button show menu -->
<div class="btn-show-menu-mobile hamburger hamburger--squeeze m-r--8">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
</div>
<!-- Menu Mobile -->
<div class="menu-mobile">
<ul class="main-menu-m">
<li>
XXX
</li>
<li>
XXX
</li>
<li>
XXX
</li>
<li>
XXX
<ul class="sub-menu-m">
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>
<span class="arrow-main-menu-m">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</li>
<li>
XXX
<ul class="sub-menu-m">
<li>XXX</li>
<li>XXX</li>
</ul>
<span class="arrow-main-menu-m">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</li>
<li>
XXX
</li>
<li>
XXX
</li>
</ul>
</div>
<!-- -->
<div class="wrap-logo container">
<!-- Logo desktop -->
<div class="logo">
<img src="images/icons/logo-01.png" alt="LOGO">
</div>
<!-- Banner -->
<div class="banner-header">
<img src="images/banner-01.jpg" alt="IMG">
</div>
</div>
<!-- Navbar STARTS HERE -->
<!-- -->
<div class="wrap-main-nav">
<div class="main-nav">
<!-- Menu desktop -->
<nav class="menu-desktop">
<a class="logo-stick" href="index.html">
<img src="images/icons/logo-01.png" alt="LOGO">
</a>
<ul class="main-menu">
<li class="main-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="main-menu-item">
XXX
<ul class="sub-menu">
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="main-menu-item">
XXX
<ul class="sub-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
</ul>
</nav>
</div>
</div>
</div>
You could achieve this using an .
Just host the navbar as a unique site and than reference it like this:
<iframe src="http://host:port/navbar"></iframe>
Place this file on a server
Fetch file contents through ajax
Replace this content with Javacript/Jquery.
I am trying to check each instance of .menu-section to see if the .menu-title div contains a h3 title. If it does then it should output the appropriate console.log message. I can't figure out where I am going wrong as logically it seems to make sense to me. Any help would be awesome.
$(".menu-section").each(function() {
if ($('.menu-title h3').length) {
console.log("menu-title h3 exists");
} else {
console.log("menu-title h3 does not exist");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
<div class="menu-wrapper nav-spacer">
<div class="menu-container content-container">
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PLUS SIZE & CURVE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PETITE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
</div>
</div>
</section>
Working CodePen: https://codepen.io/nickelse/pen/zQExRd?editors=1111
The problem is because you're looking at all .menu-title elements in the each() loop, not just the one within the current .menu-section element. You need to use the this keyword to reference the current element, then find() the element you're looking for:
$(".menu-section").each(function() {
if ($(this).find('.menu-title h3').length) {
console.log("menu-title h3 exists");
} else {
console.log("menu-title h3 does not exist");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
<div class="menu-wrapper nav-spacer">
<div class="menu-container content-container">
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PLUS SIZE & CURVE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PETITE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
</div>
</div>
</section>
I'm trying to use jQuery to hide and show a div when the link in inside the a li tag is clicked, however I can't get the DOM element.
Ousite the ul >li the script it working fine
<a class="showSingle " >All Test </a> //Work Fine
$(function() {
// $('.showSingle ul.list-inline li a').click(function () {
$('.showSingle ').click(function() {
$(this).siblings('.targetDiv ').slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a><i class="fas fa-arrow-circle-down"></i>
</li>
i have add jsfiddler to explain the hole issue https://jsfiddle.net/mpef13qu/4/
I don't think there is anything wrong, you were just missing the target :/
UPDATE: I've changed the code snippet
$(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$(this).parents("ul")
.siblings('.targetDiv')
.slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
here is the link
If the target is outside the ul it's not a sibling it's more like an uncle or something ;) so $(this).siblings wont work
Try this:
$('.showSingle').click(function(e){
e.preventDefault();
$('.targetDiv').slideToggle('fast')
})
Updated answer based on your markup
Since you have multiple toggle triggers and you only want to toggle the target directly after a certain trigger you can make use of $(this)
But you need to chain a few other jQuery functions to get up to the level where you can target the next target.
$('this').parent().parent().next('.targetDiv')
.next() is better than .siblings() in this situation since it returns the next sibling matching the .targetDiv selector
Here's the complete code:
$(document).ready(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$('this').parent().parent().next('.targetDiv').slideToggle('fast');
});
});
Updated fiddle https://jsfiddle.net/ywsmgd5c/
For not reloading page <a href="#"> must be written.
I've made demo for you, see it, #Ploni Almoni
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