I have a simple menu/accordion slider. I want to add the class="active" to the clicked link and slide down to show the UL. When another separate menu item is clicked then the active class should be removed from the previous element and added to the one just clicked. Also if the same is clicked when in active mode then the slider should slide up and remove the active class.
I've tried various configurations of the below but each time have problems getting the active class to be removed if the same is clicked to slide up. Any help is appreciated.
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
});
Update - have created a quick JSFiddle that demonstrates the problem, apologies for not doing on opening question. You can see that if same item is clicked to toggle the state remains active.
Since you want to support toggling, you should not remove active class from current element so
$(document).ready(function(menuSlide) {
var $as = $('li.menu-item-has-children a').click(function() {
$(this).toggleClass('active').next('ul').slideToggle();
$(this).parent().siblings().children('ul').slideUp();
$(this).parent().siblings().children('.active').removeClass('active');
return false;
});
});
.menu-item-has-children ul {
display: none;
}
a.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
</ul>
We simply store the previous click div in a variable and then slide up that div on click :
var previousElement = 0;
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
previousElement = 0;
}else {
$(this).addClass('active');
if(previousElement != 0) {
$(previousElement).removeClass('active');
$(previousElement).slideUp();
}
previousElement = this;
}
});
Easiest way is,
$(document).ready(function(){
$('li.menu-item-has-children .content').slideUp();
$(document).on('click','li.menu-item-has-children a',function(e){
e.preventDefault();
$this = $(this);
$('li.menu-item-has-children a').removeClass('active');
$this.addClass('active');
$('li.menu-item-has-children a').parent().find('.content').slideUp();
$this.parent().find('.content').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<ul>
<li class="menu-item-has-children">
A
<div class="content">
AAAA AAAA AAAA
</div>
</li>
<li class="menu-item-has-children">
B
<div class="content">
BBBB BBBB BBBB
</div>
</li>
<li class="menu-item-has-children">
C
<div class="content">
CCCC CCCC CCCC
</div>
</li>
</ul>
</html>
In below example, i've worked same link click twice, please let me know if you are requesting this thing or not,
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
console.log($(this).hasClass('active'));
if($(this).hasClass('active') == false)
{
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideDown();
$(this).parent().siblings().children().next().slideUp();
}
return false;
});
});
Related
I would like to show certain li based on id. So when I click on class c1. It will show me just list info about africa. Now it shows every li from demo-agents. This one is "menu". It is a map. After clicking on continent it rolls me down and points on certain li id. So when I click on class c1. It points me to li id="africa" and shows me the text.
But now it shows every li id. I would like to hide all li id africa-s.america. And when I click on class c1 it will show below li id africa.
<div id="map-continents">
<ul class="continents">
<li class="c1">Africa</li>
<li class="c2">Asia</li>
<li class="c3">Australia</li>
<li class="c4">Europe</li>
<li class="c5">North America</li>
<li class="c6">South America</li>
</ul>
</div>
and then info
<div id="demo-agents" class="demo-agents-list wrapper">
<ul>
<li id="africa"><h3>Africa</h3><p>Some info about Africa</p> </li>
<li id="asia"><h3>Asia</h3><p>Some info about Asia</p> </li>
<li id="australia"><h3>Australia</h3><p>Some info about Australia</p> </li>
<li id="europe"><h3>Europe</h3><p>Some info about Europe</p> </li>
<li id="north-america"><h3>North America</h3><p>Some info about North America</p> </li>
<li id="south-america"><h3>South America</h3><p>Some info about South America</p> </li>
</ul>
</div>
and js
$(document).ready(function(){
$('.c1').each(function () {
if($(this).hasClass('selected')) {
$('.demo-agents-list wrapper').hide();
$('.' + $(this).attr('id')).fadeIn(600);
}
});
I hide div in CSS. But Do you have any suggestions?
https://jsfiddle.net/jamesking/8rc2kepw/2/
$(function() {
$("#demo-agents li").hide();
$(".continents li a").on('click', function(e) {
var liToShow = $(this).attr("href");
$("#demo-agents li").hide();
$(liToShow).show();
e.preventDefault();
});
});
$(document).ready(function(){
$("#demo-agents li").hide();
$(".continents li").click(function(){
var crntlink = $(this).find("a").attr("href");
$("#demo-agents li").hide(); $(crntlink).show();
});
});
css
/*Hide the li with the maps, not the container div. the container div
must be visible, or else the children will always be invisible.*/
#demo-agents li { display:none }
jquery
$("#map-continents li")
.each(function() { //Show the one who is selected by default
if ($(this).hasClass('selected')) {
$('#demo-agents li').hide();
$($(this).find("a").attr('href')).fadeIn(600);
}
})
.on("click", function() { //bind click event
$("#map-continents .selected").removeClass("selected") //Remove "selected" class
$(this).addClass("selected")
$('#demo-agents li').hide(); //Hide the maps again
$($(this).addClass("selected").find("a").attr('href')).fadeIn(600); //Show the right map
})
$(document).ready(function(){
$("#demo-agents li").hide();
$(".continents li").click(function(){
var crntlink = $(this).find("a").attr("href");
$("#demo-agents li").hide();
$(crntlink).show();
});
});
I'm try to display an item inside a list that has a class which is exactly the same ID on the other list. This would be activated when I click on the other list then it will find a match class on the other list then display it.
Here is the code I'm using basically the first list is in display:none;
List 2 is my menu on which in the list 1 would you like to display.
The first list should only have one visible item at a time.
Fiddle is here
HTML
<div id="gallery-container">
<li class="1723"><p>
123
</p></li>
<li class="1725"><p>
456
</p></li>
</div>
<ul id="gallery-list">
<li id="1723">
<strong>qwertyuiop</strong>
</li>
<li id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
SCRIPT:
$("#gallery-list li").click(function() {
alert(event.target.id);
$("#gallery-container li .wc-gallery").css("display", "none");
});
window.onload = function () {
$("#gallery-container li p").css("display", "none");
}
CSS:
#gallery-container li p {display:none;}
It's bad bad to use the same id in one HTML document. Never do this. Nobody likes that, jQuery doesn't like that. I don't like it. Try using a class or a data property.
But.. scratch that.. you are not really trying to do that. But still.. it's better to use a data property :)
Anyways, to accomplish this with a data property, you can do something like this:
html
<div id="gallery-container">
<li data-id="1723">
<p>
123
</p>
</li>
<li data-id="1725">
<p>
456
</p>
</li>
</div>
<ul id="gallery-list">
<li data-id="1723">
<strong>qwertyuiop</strong>
</li>
<li data-id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
js
$("#gallery-list li").click(function() {
var id = $(this).data('id');
$("#gallery-container").find('li').each(function() {
$(this).find('p').toggle($(this).data('id') === id);
});
});
jsfiddle
If you want to fetch the id of the list you clicked:
$("#gallery-list li").on("click", function() {
alert($(this).attr("id"))
$("#gallery-container li .wc-gallery").css("display", "none");
});
$('#gallery-list li').click(function() {
var targeeet = $(this).attr('id');
$('.' + targeeet).children().css('display', 'block');
});
Try this.
All you need is :
$('#gallery-list li').click(function() {
var target = $(this).attr('id');
$("#gallery-container li").hide();
$("#gallery-container li."+target).css('display', 'block');
});
Check the example below :
$('#gallery-list li').click(function() {
var target = $(this).attr('id');
$("#gallery-container li").hide();
$("#gallery-container li."+target).css('display', 'block');
});
#gallery-container li{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="gallery-container">
<li class="1723">
<p>
123
</p>
</li>
<li class="1725">
<p>
456
</p>
</li>
</div>
<ul id="gallery-list">
<li id="1723">
<strong>qwertyuiop</strong>
</li>
<li id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
Are you trying to do an accordion?
$("#gallery-container li").hide();
$("#gallery-list li").click(function() {
$("#gallery-container li").hide();
$("#gallery-container li."+this.id).show();
});
jsFiddle
I have a drop down menu with jquery and I want to modify some text in different way depending on what is selected in the drop down menu.
The drop down menu works.
Html code:
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
Javascript code:
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this) == '#op1'){
$('#text_to_change').text("text changed");
}
if ($(this) == '#op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
Why does ($(this) == '#op1') not work?
You are trying to compare a jquery object $(this) with a string #op1
To get the id of the element use:
$(this).attr('id');
It will give you the id of the element without the #
Also i think your second if needs to be an else if { ...
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
console.log($(this).attr('id'), $(this).prop('id'));
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this).attr('id') == 'op1'){
$('#text_to_change').text("text changed");
}
else if ($(this).attr('id') == 'op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
This two item must not share the same id 'op2'
<li id="op2">option2</li>
<li id="op2">option3</li>
I have the following scripts in my dropdown menu:
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
HTML
<div class="menu">
<span>
<ul id="nav">
<li>Produk Teknik <i class='icons icon-right-dir'></i>
<div class="subs">
<div class="wrp3">
<ul>
<li><h3>Manometer</h3>
<ul>
<li><a href='#'>tes</a>
<ul>
<li><a href='#' class='anak'>tes-1</a></li>
</ul>
</li>
<li><br /></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
I need to change that script so that when we click all place, the dropdown menu will automatically be closed. Thank you
You can see my project example http://www.tokobesi.co.id/beta/
I think this is what you meant mate..Try this.. :)
$(document).click(function(e){
if( $(e.target).closest(".menu").length > 0 ) {
return false;
}else{
$("#nav .selected").removeClass("selected");
}
});
From many days am trying this but there is no result please help me when i click on main menu sub menu should highlight in php.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#cssmenu a').each(function (index) {
console.log(this.href);
if (this.href.trim() == window.location) {
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active {
background: #4FA9E4;
color: #FFF;
display: block;
}
</style>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul>
<li class="has-parent">a
</li>
<li>b
</li>
</ul>
</li>
<li class="has-sub">Patners
<ul>
<li>c
</li>
<li>d
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
You should handle the click event or other events you are interested, and toggle class in the event handler.
$(document).ready(function () {
$('#cssmenu ul ul a').click(function (e) {
//e.preventDefault();
$(this).parents('li.has-sub').find('>a').toggleClass('active');
});
});
Check the jsFiddle example.