jQuery show hide multiple links slide toggle div - javascript

I have a question about toggle effects. I have managed to be able to toggle the same div which is my goal, my problem is I want to add in the effect that say if (toggle1) is on and I click on toggle2, it will close toggle one and open toggle 2. Right now, if you click on any toggle it just opens and closes the toggle based on the state it is in. I want to be able to switch whatever is in the div when clicking on a different toggle. I hope this makes sense. http://jsfiddle.net/nbh2w/
HTML
<div>
Slide Toggle3<br /><br />
Slide Toggle4<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
</div>
JS
$(function() {
$('#toggle4').click(function () {
$('.toggle').slideToggle('1000');
return false;
});
});
$(function () {
$('#toggle3').click(function () {
$('.toggle').slideToggle('1000');
return false;
});
});

i'm not exactly sure what you're trying to achieve but based on my understanding, this might be what you want.
Slide Toggle3
Slide Toggle4
</div>
$(function() {
$('#toggle4').click(function () {
$('.toggle').hide('1000');
$('.toggle').text('toggle 4 clicked');
$('.toggle').slideToggle('1000');
return false;
});
});
$(function () {
$('#toggle3').click(function () {
$('.toggle').hide('1000');
$('.toggle').text('toggle 3 clicked');
$('.toggle').slideToggle('1000');
return false;
});
});
http://jsfiddle.net/rNqd5/

You can use an instance of this, also, you're going to need two div's for each link:
Slide Toggle3
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
<br><br>
Slide Toggle3
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
You should also use a class for your links, but I just comma separated the ID's
$("#toggle3, #toggle4").click(function() {
$(this).next(".toggle").slideToggle("slow");
});
Demo: http://jsfiddle.net/nbh2w/2/

You need some thing like this ?
$('#toggle4').click(function () {
$('.toggle').hide();
$('.toggle').slideToggle('1000');
return false;
});
Try it

Related

jQuery toggle show/hide default content

I have a show/hide toggle that switches between content if menu a is clicked.
Before the click function is triggered content is shown in the default div.
For some reason if you click one of the a tag's twice it successfully toggles the content on/off; however you are left with a blank screen
This is a poor user experience.
How can I avoid this and ensure that the default content is shown if a user selects a menu item twice?
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
Screen
Music
Art
Food
</div>
<div id="show-screen" class="show">show screen</div>
<div id="show-music" class="show">show music</div>
<div id="show-art" class="show">show art</div>
<div id="show-food" class="show">show food</div>
<div class="default">default content</div>
Thanks
Although I'd suggest a completely different approach to handle this problem, to make your code work, I'd do something like this.
https://jsfiddle.net/6cnt95ap/1/
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
window.setTimeout(()=>{
var showDefault = true, divs = $('.show');
divs.each(function(){
if($(this).css("display") !=='none'){
showDefault = false;
return false;
}
});
if(showDefault){
$('.default').removeClass('hidden');
}
}, 500)
});
})

How to toggle visibility of several divs separately

I have a series of text links that toggle visibility of a div element. The text links are styled to look like buttons and the text is being changed when the div is visible or invisible.
The problem is that when the first link is pressed, it toggles the visibility of it's own div plus all the other hidden divs and what is needed is that each link toggles the visibility of it's own div.
My question is what is the best way to solve this problem using only one function. Below is my code. Thanks!
The code can be also tested here:
http://jsfiddle.net/Bradg/eBfxB/
HTML:
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>
JS:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(".slidingDiv").slideDown(
function(){
$("#plus").text("Hide all")
}
);
},function(){
$(".slidingDiv").slideUp(
function(){
$("#plus").text("See all")
}
);
});
});
CSS:
.show_hide {
display: none;
}
The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "Hide all" ? "See all" : "Hide all";
});
});
});
});
FIDDLE
Note the use of the classes only (ID's must be unique) and the this keyword

Many toggle-slide elements in one page

I use this script multiple times to hide some text:
$(document).ready(function(){
$("#button_to_click_to_toggle").click(function(){
$("#hidden_div").slideToggle("medium");
});
});
I want to make it impossible to toggle two hidden divs at once.
Example:
Click on one button (#button1) = the hidden div (#div1) associated to that button shows.
Click another button (#button2) = The div (#div2) associated to that button shows and at the same time #div1 closes (slide to close).
Click another button (#button3) = The div (#div3) associated to that button shows and at the same time #div2 closes (slide to close).
Add a class .button to all of the buttons and .div to all divs. Then it's just a matter of:
$(".button").on('click', function () {
var id = this.id.replace('button', '');
//properly toggle visibility of selected div
if ($("#div" + id).is(":visible")) {
$("#div" + id).slideUp();
}
else {
$("#div" + id).slideDown();
}
//hide all divs except the selected one
$(".div").not("#div" + id).slideUp();
});
http://jsfiddle.net/6Lhxm/
Could also hide all the divs on click and then show only the associated one:
javascript:
$(document).ready(function () {
$("button").click(function () {
$("div").hide();
$(this).next().show();
});
});
html:
<button type="button">one</button>
<div id="one">one</div>
<button type="button">two</button>
<div id="two">two</div>
<button type="button">three</button>
<div id="three">three</div>
http://jsfiddle.net/x7Ehq/

slide up jumps to top of page

I have some jQuery accordion sliders that slide down and slide up when clicked to reveal content.
Everything works as it should, but if you click on the same link to slide up the same content, it will jump to the top of the page.
I have
return false;
to prevent it jumping to the top of the page when another slider is clicked, so not too sure on what to use so that it doesn't jump to the top of the page to slide up the same content.
I've tied to add
event.preventDefault();
which works, but it breaks in IE9 and IE8.
Here's what I have:
$(document).ready(function() {
$('.slider').click(function() {
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
return false;
}
});
$('.internal').hide();
});
HTML Sample:
<div class="slider">Slide Link 1</div>
<div class="internal">
Stuff1
</div>
<div class="slider">Slide Link 2</div>
<div class="internal">
Stuff2
</div>
You are going to want to prevent the default action of the click event. try this:
$(document).ready(function() {
$('.slider').click(function(e) {
e.preventDefault();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
return false;
}
});
$('.internal').hide();
});
the links probably have anchor tags like <a href="#" ...>, try to remove href="#" and if you still want that looks like a link with pointer cursor, use css:
a{
cursor: pointer;
}

How to disable one toggler when another toggler is not toggle back yet?

I have a image with 2 buttons:
<div class="panel">
<div>
<a class="a-button>Toggle A</a>
<a class="b-button>Toggle B</a>
</div>
<p id="statics">Statics numbers</p>
<p id='chart">Chart</p>
</div>
<div class="item-img"><img src="..."></div>
If I want to view #statics, I click a-button to hide item-img. Then, click again to show img and hide #statics.
If I want to view #chart, I click b-button to hide item-img, then, click again to show item-img and hide #chart.
jQuery(document).ready( function($) {
$(".a-button").click(function () {
$("#statics").toggle("slow");
$(".item-img").toggle('slow');
});
$(".b-button").click(function () {
$("#chart").toggle("slow");
$(".item-img").toggle('slow');
});
});
The problem is-- If I hide item-img by either toggler a-button or b-button, Then, click the other toggler(a or b) before click the first toggler to show the item -img again, Both #statics and #chart show up, make a big mess.
How can I disable one toggler when another toggler is not toggle back yet?
jQuery(document).ready( function($) {
$(".a-button").click(function () {
if(!$("#chart").is(':visible')) {
$("#statics").toggle("slow");
$(".item-img").toggle('slow');
}
});
$(".b-button").click(function () {
if(!$("#statics").is(':visible')) {
$("#chart").toggle("slow");
$(".item-img").toggle('slow');
}
});
});
Working Fiddle
jQuery(document).ready( function($) {
var state;
$(".a-button").click(function () {
$("#statics").toggle("slow");
$(".item-img").toggle('slow');
state = $(".b-button").prop('disabled');
$(".b-button").prop('disabled', !state);
});
$(".b-button").click(function () {
$("#chart").toggle("slow");
$(".item-img").toggle('slow');
state = $(".a-button").prop('disabled');
$(".a-button").prop('disabled', !state);
});
});
Edit: Didn't realize you weren't using actual buttons, see working demo with this updated html (not sure if you have the option to change those):
<input type="button" class="a-button" value="Toggle A">
<input type="button" class="b-button" value="Toggle B">

Categories