Toggle ExpandAll/CollapseAll - javascript

I am currently using jQuery toggle to toggle between show and hide. It works perfectly fine for individual elements. When I try to do a expand all and collapse all it works fine for all the condition except one. If any individual element is already expanded or collapsed it does toggle them but not as expected. That is, when I click on expand all it expands all the elements except the individual element which is already expanded get collapsed and vice-versa. How do I take care of this condition?
<script type="text/javascript">
$(".toggle_container").hide();
$("div.description-content-title").toggle(function () {
$(this).addClass("collArrow");
}, function () {
$(this).removeClass("collArrow");
});
$("div.description-content-title").click(function () {
$(this).next(".toggle_container").slideToggle("slow");
});
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
}, function () {
$(".close-all a").text("[Close All]");
});
$(".close-all").click(function () {
$(".toggle_container").slideToggle("slow");
});
</script>
HTML:
<div class="news-top-head">
<div class="time-head sortable" data-sort-column="ContentDate">
<span style="float: left; width: auto;">Time</span> <span class="sort-order-hidden ui-icon" />
</div>
<div class="description-head sortable" data-sort-column="ContentTitle">
<span style="float: left; width: auto;">Description</span> <span class="sort-order-hidden ui-icon" />
</div>
<div class="close-all">
close all
</div>
<div class="clear">
</div>
</div>
<div class="description-content">
<div class="description-content-title expArrow"><%=breakingNews[index].ContentTitle%></div>
<div class="toggle_container">
<p ><%=breakingNews[index].ContentDescription%></p>
</div>
</div>
</div>
If you have any code sample it would be really helpful.

You can't use toggle for your close-all button in that case unless you add an extra class to something to figure out which the odd one out is and ignore it. Easiest way to make this work is to use slideDown() and slideUp() instead of slideToggle(). Remove the following code:
$(".close-all").click(function () {
$(".toggle_container").slideToggle("slow");
});
And change:
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
}, function () {
$(".close-all a").text("[Close All]");
});
To:
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
$(".toggle_container").slideDown("slow");
}, function () {
$(".close-all a").text("[Close All]");
$(".toggle_container").slideUp("slow");
});

Check out this code if useful,
jQuery(document).ready(function($) {
$("#toggle_container").hide();
});
function showSlidingDiv(){
$("#toggle_container").animate({"height": "toggle"}, { duration: 500 });
}
Also can refer to Show-Hide div content using jQuery if required..

Related

make div visible on hover

I need to make div visible on hover
$(document).ready(function () {
$('.carousel').hover(function () {
$(this).parent().next('.semitransparentoverlay').fadeIn('200');
},
function () {
$(this).parent().next('.semitransparentoverlay').fadeOut('200');
});
});
but on hover div becomes visible again and again
http://jsfiddle.net/n8b65qbb/14/
How to prevent it and make div visible only once and then hide it on mouselive only once?
If you do the hover on the parent instead, and move the overlay to within the wrapper, this will prevent the fading in of the overlay from triggering a second hover event.
html, moving overlay inside of carousel-wrapper:
<div class="block-11 block-1">
<div class="carousel-wrapper" id="carousel-1">
<ul class="carousel clearfix">
<li><img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350"/></li>
</ul>
<div class="semitransparentoverlay">
<input name="" type="button" value="Show all" class="btn-1"/>
</div>
</div>
Jquery, targeting carousel-wrapper for hover:
$(document).ready(function () {
$('.carousel-wrapper').hover(function () {
$(this).children('.semitransparentoverlay').fadeIn('200');
},
function () {
$(this).children('.semitransparentoverlay').fadeOut('200');
});
});
Updated link: http://jsfiddle.net/carasin/1po0acv6/2/
Another option would be including and extra div just for hover event, before carousel-wrapper.
$(document).ready(function () {
$('.hover-block').hover(function () {
$(this).siblings('.semitransparentoverlay').fadeIn('200');
},
function () {
$(this).siblings('.semitransparentoverlay').fadeOut('200');
});
});
Check fiddle: http://jsfiddle.net/benjasHu/d1wg3fe0/

What is wrong with my JQuery Function?

I want to make the #test element display:block; after clicking on the #button element.
And if I click again I want the #test element to be display:none;.
<body>
<div id="content-wrapper">
<!-- header -->
<header id="top">
<!--- Nav-bar -->
<div id="button">
</div>
</header>
<div id="test">
This is my jQuery code:
$(function() {
$('#button').on('click', function () {
if ($('#test').css("display","block")) {
$('#test').css("display","none");
} else {
$('#test').css("display","block");
}
});
});
I have no idea why it won't work!
.toggle() is okay - but using css classes will give you better control ( say using CSS transitions in the future ) ( stops inline styling, but does the same job )
CSS
#test { display:none; }
#text.on { display:block; }
JS/JQUERY
$('#button').on('click', function () {
$('#test').toggleClass('on');
});
Use .toggle()
Display or hide the matched elements.
$(function () {
$('#button').on('click', function () {
$('#test').toggle();
});
});
if ($('#test').css("display","block")) {
you are setting displayto block instead of checking so it always be true.
if condition should be [FYI]
if ($('#test').css("display") == "block") {
just a small change
$(function() {
$('#button').on('click', function () {
if ($('#test').css("display") === "block") {
$('#test').css("display","none");
} else {
$('#test').css("display","block");
}
});
});
although using jQuery toggle() function will save you some time.

jquery onclick expand div and change text inside span

I'm having a problem with my script where i click the H3 it will expand and only change the first text in span no matter if i click the second H3. After i wanna collapse it , it doesn't change back to the original text.
What should i use ? TQ
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery('#span1).html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span1" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
You need to set up a toggle function for the arrows. As this can't be done with the html codes you need to use ids so you can target them specifically here is the jquery you need:
$(document).ready(function () {
$('.pad').hide();
$('.heading').click(function () {
$(this).next('.pad').slideToggle();
if($(this).find('.span1').attr('id') == 'yes') {
$(this).find('.span1').attr('id', '').html('∨');
} else {
$(this).find('.span1').attr('id', 'yes').html('∧');
}
});
});
Fiddle Demo:
http://jsfiddle.net/Hive7/5xueU/2/
You can try this one
$(document).ready(function() {
$(".pad").hide();
//toggle the componenet with class msg_body
$(".heading").click(function()
$heading = $(this);
$(this).next(".pad").slideToggle(500,function() {
var sign = $(this).is(':visible') ? '∧' : '∨';
$heading.find('span').html(sign)
});
});
});
I did a JsFiddle version for you to look at here: http://jsfiddle.net/gUTTK/
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
jQuery(this).next(".pad").slideToggle(500);
if (jQuery(this).find('.span1').is(':visible')){
jQuery(this).find('.span1').hide();
jQuery(this).find('.span2').show();
} else {
jQuery(this).find('.span2').hide();
jQuery(this).find('.span1').show();
}
});
});
The HTML
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
<h3 class="heading">text1
<span class="span1" style="float: right;">∨</span>
<span class="span2" style="float: right; display: none;">∧</span>
</h3>
<div class="pad">content</div>
Since you are selecting #span1, it's going to return only the first instance of that in your document every time. IDs must be unique. Try this instead:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".pad").slideToggle(500);
jQuery(this).find("span").html('∧')
});
});
</script>
<h3 class="heading">text1<span id="span1" style="float:right;">∨</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">∨</span></h3>
<div id="tech" class="pad">
content
</div>
To toggle the arrows back, try checking for the visibility of the .pad element:
http://jsfiddle.net/tjnicolaides/W6nBG/
jQuery(document).ready(function () {
jQuery(".pad").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function () {
var $pad = $(this).next(".pad");
var $arrow = $(this).find("span");
if ($pad.is(':visible')) {
$arrow.html('∨');
} else {
$arrow.html('∧');
}
$pad.slideToggle(500);
});
});

Toggle div on link click

http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.
Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>

Jquery attr not working Internet Explorer

I have the code below that clicking on an image hides a div.
Works perfectly, but does not work in IE ...
Why?
http://jsfiddle.net/mtsys/6qAfp/
codes:
$(document).ready(function () {
$('.fechar').click( function() { alert('testes'); $(".nav").attr("hidden",true); });
$('.mais').click( function() {
var status = $(".nav").attr("hidden");
if (status)
{
$(".nav").attr("hidden",false);
}
else
{
$(".nav").attr("hidden",true);
}
});
});
HTML:
<div class="header">
Estágio
<div class="mais"></div>
</div>
<div class ="parent">
<div class="content">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div class="nav"><div class="fechar"></div><div id="dadosDiv"></div></div>
</div>
tks
Use .hide() and toggle() to change the display of the elements
$('.fechar').click(function () {
$(".nav").hide()
});
$('.mais').click(function () {
$(".nav").toggle()
});
Demo: Fiddle
Why not change your JS to:
$('.fechar').click( function() { alert('testes'); $(".nav").hide(); });
$('.mais').click( function() {
$(".nav").toggle();
});
This will not only simplify your code but utilise jQuery's inbuilt function for toggling content visibility. Incidentally, the issue was the hidden attr reference, this should have been .css('hidden',true) if you want to go down that route...

Categories

Resources