jQuery hide dropdown menu - javascript

I have a dropdown menu that shows with the following jQuery script:
jQuery(document).ready(function($) {
$('#block-mln-main-menu li').click(function(){
$(this).find('.test').toggle();
});
});
What I want to achieve is when the user clicks anywhere else on the page, it slides up or hides. I am literally at a loss on how to achieve this.
Any help is greatly appreciated.
added a fiddle : http://jsfiddle.net/aL7Xe/999/

Yoy can try stop propagation event.
CSS:
.showup{width:100px;height:100px; background:red; display:none;}
.click{cursor:pointer;}
HTML
<div class="click">click me</div>
<div class="showup">Click somewhere else!</div>
JQUERY
$(document).ready(function(){
$('.click').click(function(event){
event.stopPropagation();
$(".showup").slideToggle("fast");
});
$(".showup").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".showup").hide();
});

Toggle will only work it user click on the same object it you want to hide it when click elsewhere try
jQuery(document).ready(function($) {
$(this).not('#block-mln-main-menu li').click(function(){
$(this).find('.test').hide();
});
});

What I understand is that you want to show dropdown menu when an user clicks on it. If the user again clicks on it or anywhere on the page it should close.
CSS
.hide {
display: none;
}
JS
$('.menu-label').on('click', function() {
$('.drop-down-menu').toggleClass('hide');
});
To hide the menu when user click anywhere on page
$('body').on('click', function() {
$('.drop-down-menu').addClass('hide');
});

Related

How to addClass and remove Class when clicking a link?

I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?
When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");
Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle
Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});
You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle
Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/
According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle

Showing dropdown list when I clicked on

<script>
$(document).ready(function({$("#more").click(function()$(".dropdown").fadeToggle("slow")});});
</script>
This is my script for more option. I want to show the dropdown list when I clicked and hide it when I clicked again. Whit this code, all I can get is hiding when I clicked and showing when I clicked again. I want to make it reverse.
How can I change the default display?
Your code works, it just has some typo's.
And to define the default state, change the display property of .dropdown to none
$(document).ready(function() {
$("#more").click( function() {
$(".dropdown").fadeToggle("slow")
});
});
.dropdown {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="more">click for more</div>
<div class="dropdown">Droppie down</div>
you can use CSS display:none property to hide the div on page load.
eg:
#more{
display:none;
}
$("#more" ).on('click', function() {
$( ".dropdown" ).fadeToggle( "slow", "linear" );
});

Why can't I add class to this html element?

I'm trying to add this the active class to the element when the user clicks it. Why does it not work? Is there something wrong with the syntax?
HTML code:
<div class="accordion">
<h3>a</h3>
<p class="active">b</p>
<h3>a</h3>
<p>b</p>
<h3>b</h3>
<p>b</p>
<h3>b</h3>
<p>b</p>
</div>
jQuery code:
jQuery(function($) {
$('div.accordion').click(function(e) {
e.preventDefault();
$(this).addClass("active");
});
});
What i wanna do is when the user clicks h3, thats when it sets the p tag below it the active class
You need to bind click event to H3 elements. Also make sure you remove previously active elements:
var $h3 = $('.accordion > h3').click(function(e) {
e.preventDefault();
$h3.next('p').removeClass('active');
$(this).next('p').addClass('active');
});
Demo: http://jsfiddle.net/2DB37/
I'm trying to add the active class to the p tag.
You forgot to add a click event to the p tag:
jQuery(function($) {
$('div.accordion h3').click(function(e) {
e.preventDefault();
$(this).next('p').addClass("active");
});
});
WORKING DEMO
change jQuery to like this
jQuery(function($) {
$('div.accordion p').click(function(e) {
e.preventDefault();
$(this).addClass("active");
});
});
UPDATED DEMO
jQuery(function($) {
$('div.accordion h3').click(function(e) {
e.preventDefault();
$(this).next().addClass("active");
});
});

Problems making a button show and hide content

I have just trying to come up with a button to hide content based on a example I've seen that works.
HTML
<button id="button">Test</button><br/><br/>
<div id="panel">Test Panel</div>
jQuery
$(document).ready(function(){
$("#button").toggle(function() {
if $("#panel").css("display") == "none" {
$("#panel").html("Show");
} else {
$("#panel").html("Hide");
};
});
});
CSS
#panel {display:none;}
Any help is appreciated. Thank you!
Toggle is deprecated.. Just attach a click event to the button and use the toggle method for the panel
$("#button").click(function() {
$("#panel").toggle();
});
Check Fiddle

closing element opened by toggle() function

How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);

Categories

Resources