Toggle up all elements if were open - javascript

For this markup:
<div id="citate">Citate</div>
<div id="unu" hidden>Autori</div>
<div id="autori" hidden>
<ul>
<li>Ion Creanga</li>
<li>Ion Creanga</li>
<li>Ion Creanga</li>
<li>Ion Creanga</li>
</ul>
</div>
<div id="doi" hidden>Subiecte</div>
<div id="subiecte" hidden>
<ul>
<li>Creanga</li>
<li>Creanga</li>
<li>Creanga</li>
<li>Creanga</li>
</ul>
</div>
I have this code JS :
$(document).ready(function () {
$("div#citate").click(function () {
$("div#unu ").slideToggle();
});
});
$(document).ready(function () {
$("div#citate").click(function () {
$("div#doi ").slideToggle();
});
});
$(document).ready(function () {
$("div#unu").click(function () {
$("div#autori").slideToggle();
});
});
$(document).ready(function () {
$("div#doi").click(function () {
$("div#subiecte").slideToggle();
});
});
and i want when i click second time on "Citate" it will toogleup all other elements from toogledown "Autori" and "Subiecte" if there were open. I try to do it, I searched how to but can not do it right.
I used slideToggle() function.

This can help you.
$("div#citate").click(function(){
if( $('div#autori, div#subiecte').is(':visible') ){
$("div#unu, div#doi,div#autori, div#subiecte").slideUp();
}
});
Fiddle Demo
No need to add $(document).ready again and agian

Its Working use callback : See DEMO

This is not a optimal solution as it does not scale at all, but it works. If you toggle the parent (#citate) and your submenus are visible, then close them by using slideToggle or slideUp.
$(document).ready(function(){
$("div#citate").click(function(){
$("div#unu").slideToggle();
$("div#doi").slideToggle();
if($("div#autori").is(":visible")) {
$("div#autori").slideToggle();
}
if($("div#subiecte").is(":visible")) {
$("div#subiecte").slideToggle();
}
});
$("div#unu").click(function(){
$("div#autori").slideToggle();
});
$("div#doi").click(function(){
$("div#subiecte").slideToggle();
});
});

Related

Jquery click function for toggle is not working

I have a scenario,where footer must be collapsed based on device.Here,I used toggle class for collapse in mobile device,the toggle click is not working.
JavaScript code:
// Code goes here
$(function() {
$('.footer-links-holder h3').click(function () {
$(this).parent().toggleClass('active');
});
});
Plunker
Any help would be appreciated.
Thanks in Advance.
Just write your JS like this -
$('.footer-links-holder h3').click(function () {
$(this).parent().toggleClass('active');
});
Your updated Plunker
Batter practice is write code in ready function
$(document).ready(function(){
$('.footer-links-holder h3').click(function () {
$(this).parent().toggleClass('active');
});
})
$(function() {
$('.footer-links-holder h3').off().click(function () {
$(this).parent().toggleClass('active');
});
});

How to Hide HTML list with jQuery and rise the following inputs?

HI guys this is my Html code :
<ul id="var_language_short">
<li id="languages_more"><label class="form_present_trigger">More</label></li>
</ul>
<div id="language_checkbox" class="popup_fullscreen">
<div class="popup_fullscreen_close">close</div>
<ul id="var_language_long">
</ul>
</div>
<div class="form_present_row">
<span class="form_present_title">
<label class="form_present_title_label" for="var_prixPlat">Prix moyen
d'un plat<span class="req" title="Required">*</span></label>
</span>
<div class="form_present_content">
<span class="form_present_update">
<input class="form_present_input var_prixPlat" type="text" id="var_prixPlat" />
</span>
</div>
</div>
...
jquery code:
var list_Tyepe_Restaurant = document.getElementById('iType')
.contentWindow.document.body.innerHTML;
$("#var_language_long").html(list_Tyepe_Restaurant);
$("#languages_more").click(function (e) {
$("#language_checkbox").css("visibility", "visible");
$("#language_checkbox").css("opacity", "1");
});
$(".popup_fullscreen_close").click(function (e) {
$("#language_checkbox").css("opacity", "0");
$("#language_checkbox").css("visibility", "hidden");
});
I can show and hide this list but The problem is that when i hide it there is a blank space and the following inputs don't rise.
Pleade help
Dont use visibility, it does not rise/unrise.
Use display
Or even easier, use show() and hide()
var list_Tyepe_Restaurant = document.getElementById('iType').contentWindow.document.body.innerHTML;
$("#var_language_long").html(list_Tyepe_Restaurant);
$("#languages_more").click(function (e) {
$("#language_checkbox").show();
});
$(".popup_fullscreen_close").click(function (e) {
$("#language_checkbox").hide();
});
FYI .hide() is equivalent to .css('display', 'none');
Use .hide() not visibilty.
hide removes space taken but visibilty doesnt.
$("#languages_more").click(function (e) {
$("#language_checkbox").show()
});
$(".popup_fullscreen_close").click(function (e) {
$("#language_checkbox").hide();
});
For some reason you want to use visibilty then set height to 0
$("#languages_more").click(function (e) {
$("#language_checkbox").css({"visibility" :"visible","height":"auto","opacity":"1"});
});
$(".popup_fullscreen_close").click(function (e) {
$("#language_checkbox").css({"visibility" :"hidden", "height":"0","opacity":"0"});
});
instead of $("#language_checkbox").css("visibility", "visible");
use
$("#language_checkbox").show();
And instead of $("#language_checkbox").css("visibility", "hidden");
use
$("#language_checkbox").hide()
As per visibility:hidden; it will hide the selector, but will retain the space, if you want to get rid of the space also then you have to use display:none; to hide and display:block; to show.
I have updated the code with few options
$("#languages_more").on('click', function () {
$("#language_checkbox").show();
});
$(".popup_fullscreen_close").on('click', function () {
$("#language_checkbox").hide();
});
or for better animation stuff you can use
$("#languages_more").on('click', function () {
$("#language_checkbox").fadeIn();
});
$(".popup_fullscreen_close").on('click', function () {
$("#language_checkbox").fadeOut();
});
or
$("#languages_more").on('click', function () {
$("#language_checkbox").slideDown();
});
$(".popup_fullscreen_close").on('click', function () {
$("#language_checkbox").slideUp();
});

Close div onclick <a> jquery

I use this code to display a div onclick:
;(function($) {
$(function () {
$('.m-help .m-text').hide();
$('.m-help')
.live('click', function () {
$(this).find('.m-text').show();
})
.live('click', function () {
$(this).find('.m-link-close-button').hide();
});
});
$(document).bind('m-ajax-after', function (e, selectors) {
$('.m-help .m-text').hide();
});
})(jQuery);
And with this HTML:
<div class="m-help">
<div class="m-text" style="width: 40px;">
<?php echo $_helpHtml ?>
<span>x</span>
</div>
</div>
This does work onclick to display the div, but I want to use the X mark inside the div to close the div again.
Closing the div does not work.
What am I doing wrong and how can I fix this problem?
Event delegation
$('.m-help').on('click', function (event) {
var close = $(event.target).closest('.m-link-close-button').length;
$(this).find('.m-text')[close ? 'hide' : 'show']();
});
http://jsfiddle.net/moogs/9e47j19L/1/
you can get the parent of your close button with parent() so you can do it this way :
(function($){
$('.m-help .m-text').hide();
$('.m-help').live('click', function(ev) {
$(this).find('.m-text').show();
});
$(".m-link-close-button").live('click', function (ev) {
$(this).parent().hide();
});
})(jQuery)
try this:
HTML
<div class="m-help">
<div class="m-text" style="width: 40px;">
<?php echo $_helpHtml ?>
<span>x</span>
</div>
Click
</div>
JS:
$(".m-text").hide();
$(".m-link").click(function () {
$(".m-text").show();
});
$(".m-link-close-button span").click(function () {
$(".m-text").hide();
});
Working fiddle:http://jsfiddle.net/cncf5Lz9/
Use click event on a tag to close the div:
function($) {
$(function () {
$('.m-help .m-text').hide();
$('.m-help')
.live('click', function () {
$(this).find('.m-text').show();
});
$(".m-link-close-button").live('click', function () {
$(this).closest('.m-text').hide();
});
});
$(document).bind('m-ajax-after', function (e, selectors) {
$('.m-help .m-text').hide();
});
})(jQuery);

In jquery, when i click close link and outside the div my toggle class not getting hide

I am doing toggle class to hide and show, toggle class is working fine, but when i click that "Close" link and outside the div the current displaying div was not getting hide, i am new to jquery. help me if any one know this answer, i have attacted a code below.
Html code
<div class="NoViews">
<img src="~/Content/Theme/images/fav.png" alt="">
<p>Shortlist</p>
<span>1</span>
<div class="shortlistProperty">
<div class="shortlistHeader">
<h5>Shortlisted properties (1)
<p class="flRight"><a class="closeShortlist" href="#">Close</a></p>
</h5>
</div>
<div class="shortlistBody">
Div content
</div>
</div>
</div>
jquery code
$(document).ready(function () {
$(".shortlistProperty").hide();
$(".mySearchProperty").hide();
$(".NoViews").click(function () {
$('.shortlistProperty').toggle();
$('.mySearchProperty').hide();
});
$(".closeShortlist").click(function () {
$('.shortlistProperty').toggle();
$('.shortlistProperty').toggle(false);
});
$(".searchView").click(function () {
$('.mySearchProperty').toggle();
$('.shortlistProperty').hide();
});
$(".closemySearch").click(function () {
$('.mySearchProperty').toggle();
$('.mySearchProperty').toggle(false);
});
});
In this, i want when i click that close link my current div have to get hides and when i click out side the current div have to close.
You have to stop the event bubble. Check the code.
$(document).ready(function () {
$(".shortlistProperty").hide();
$(".mySearchProperty").hide();
$(".NoViews").click(function (e) {
$('.shortlistProperty').toggle();
$('.mySearchProperty').hide();
e.stopPropagation();
});
$('.shortlistProperty').click(function (e) {
e.stopPropagation();
});
$(".closeShortlist").click(function (e) {
$('.shortlistProperty').toggle();
e.stopPropagation();
});
$(".searchView").click(function (e) {
$('.mySearchProperty').toggle();
$('.shortlistProperty').hide();
e.stopPropagation();
});
$(".closemySearch").click(function (e) {
$('.mySearchProperty').toggle();
e.stopPropagation();
});
$('body').click(function (e) {
$('.shortlistProperty').hide();
});
});

jQuery mouseenter/leave

I have this code in html:
<div class="sub-status">
<p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>
On hover, I want that to be changed to:
<div class="sub-status">
<p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>
And, I have this code in jQuery:
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
});
$('.sub-status').mouseleave(function() {
$('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
The first function is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.
Thanks.
Change
$('this')...
to
$(this)...
And you can use hover() instead of using two separate functions:
$('.sub-status').hover(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
Updated
Your fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.
$('.sub-status').hover(function() {
$(this).children('p')
.removeClass()
.addClass('unsubscribed')
.html("<i>X</i> Unsubscribe");
},function() {
$(this).children('p')
.removeClass()
.addClass('subscribed')
.html("<i class='icon-check'></i> Subscribed");
});
Working fiddle
Here, try this. Working demo: http://jsfiddle.net/XrYj4/3/
$(document).ready(function() {
$('.sub-status').on("mouseenter", function() {
$(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe");
}).on("mouseleave", function() {
$(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed");
});
});
Try to use a hover function:
$(".sub-status").hover(
function () {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},
function () {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
}
);
http://api.jquery.com/hover/
Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff faster.
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
}).mouseleave(function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});

Categories

Resources