switch/hide div JQuery - javascript

When I expand a division it can't be collapse again. All I need is when the division is shown I want to hide it again when clicking on it.
Here's my HTML:
<div class="login_area" id="clickHere2">
Signup
<div class="drop-down" id="signup_area_hover">
Signup
</div>
</div>
<div class="login_area" id="clickHere">
Login
<div class="drop-down" id="login_area_hover">
Login
</div>
</div>
<div class="drop-down" id="dropdown_login">
<div class="dropdown_login_header">
<div class="beeper_value"></div>
<div class="beeper_login"></div>
</div>Hello World 111
</div>
<div class="drop-down" id="dropdown_signup">
<div class="dropdown_signup_header">
<div class="beeper_signup"></div>
</div>Hello World 2222
</div>
and here's the JS :
<script type="text/javascript">
$( '#clickHere' ).click(function() {
$( '#dropdown_login' ).slideToggle(500);
});
$( '#clickHere2' ).click(function() {
$( '#dropdown_signup' ).slideToggle(500);
});
</script>
I want to add an if condition if the clickHere is shown, ClickHere2 hides and vice versa.

Take a look at the toggle / slideToggle functions in jquery.
http://api.jquery.com/toggle/ and https://api.jquery.com/slideToggle/
There are examples on the bottom of the page.

DEMO
jQuery:
$( "#myBtn" ).click(function() {
$( "#myDiv" ).toggle();
});
HTML:
<div id="myDiv"></div>
<button type="button" id="myBtn">Toggle</button>
CSS:
#myDiv {
background-color:red;
height:75px;
width:75px;
}
Resources:
http://api.jquery.com/toggle/

Related

Multiple Toggle IDs - Close One When Another Open

I have a page with lots of toggle boxes. When one closes I'd like another to open. Because of the layout of the design there are five hyperlinks in a row and then five hidden boxes below which toggle (so I've used unique ID's for the divs and buttons) - there's a total of about 40 of these rows so it's quite long - probably something more efficient available? However, now I'd like to close one, when another is toggled open. I've tried to find a solution but can't seem to. Here is my JQuery:
$(window).load(function(){
$( "#button1" ).click(function() {
$( "#item1" ).slideToggle();
});
$( "#button2" ).click(function() {
$( "#item2" ).slideToggle();
});
$( "#button3" ).click(function() {
$( "#item3" ).slideToggle();
});
});
and here is my HTML:
<div class="row">
<div class="onefifth"><a id="button1" href="#"><img src="assets/01.jpg"></a></div>
<div class="onefifth"><a id="button2" href="#"><img src="assets/02.jpg"></a></div>
<div class="onefifth"><a id="button3" href="#"><img src="assets/03.jpg"></a></div>
</div>
<div id="item1" style="display: none;">
BOX CONTENT
</div>
<div id="item2" style="display: none;">
BOX CONTENT 2
</div>
<div id="item3" style="display: none;">
BOX CONTENT 3
</div>
Any help would be greatly appreciated! Quite new to JS and struggling a bit...
One nice approach that will give you more control over the elements is avoid the use of hardcoded ID's to refer your buttons, instead use the class of the parent you already have; I suggest on your <a> elements use the href attribute to store which target you want to open.
To close the other elements you can slideUp() all #item... containers or use a flag like a active class.
$(document).ready(function() {
$(".onefifth").on('click','a',function() {
var targ = $(this).attr('href');
$('[id^="item"]').slideUp();
$(targ).slideToggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="onefifth">
<img src="assets/01.jpg">
</div>
<div class="onefifth">
<img src="assets/02.jpg">
</div>
<div class="onefifth">
<img src="assets/03.jpg">
</div>
</div>
<div id="item1" style="display: none;">
BOX CONTENT
</div>
<div id="item2" style="display: none;">
BOX CONTENT 2
</div>
<div id="item3" style="display: none;">
BOX CONTENT 3
</div>
Option 2
If you can be sure the order of your buttons and the order of your containers will match then you can simplify more this with the use of a common class on the containers no ID's.
$(document).ready(function() {
$(".onefifth").on('click', 'a', function(e) {
e.preventDefault();
$('.content').slideUp().eq($(this).parent().index()).slideDown();
})
});
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="onefifth">
<img src="assets/01.jpg">
</div>
<div class="onefifth">
<img src="assets/02.jpg">
</div>
<div class="onefifth">
<img src="assets/03.jpg">
</div>
</div>
<div class="content">
BOX CONTENT
</div>
<div class="content">
BOX CONTENT 2
</div>
<div class="content">
BOX CONTENT 3
</div>
Add a class to all your divs likes this:
<div class="contentBox" id="item1" style="display: none;">
BOX CONTENT
</div>
<div class="contentBox" id="item2" style="display: none;">
BOX CONTENT 2
</div>
<div class="contentBox" id="item3" style="display: none;">
BOX CONTENT 3
</div>
Then you can just just do a close on all of those before you open the new ones
$(window).load(function(){
$( "#button1" ).click(function() {
closeOpenContent();
$( "#item1" ).slideToggle();
});
$( "#button2" ).click(function() {
closeOpenContent();
$( "#item2" ).slideToggle();
});
$( "#button3" ).click(function() {
closeOpenContent();
$( "#item3" ).slideToggle();
});
});
function closeOpenContent(){
$(".contentBox:visible").slideToggle();
}

Jquery Modal on click add class then remove

This bit of code is supposed to add a class and then with a delay remove the div entirely. It just jumps to deleting the div. Any ideas why?
The HTML
<!-- modal conent-->
<div class="modal" id="modal">
<div class="modal-content ">
<h1>Tricks Are 4 Kids</h1>
<p>Ok so my modal doesn't look like this one, but this is it boiled down. Can I write the JS better??? ....</p>
<button href="#" class="close" id="close" >X</button>
</div>
</div>
</div>
<!-- page conent-->
<div id="page-content-wrapper" >I am a div with all the page conent. lalalalala</div>
The CSS
.red {background:red;}
The jQuery
$(document).ready( function() {
$( "#close" ).click(function() {
$("#modal").addClass("red").delay(800).queue
$("#modal").remove();
});
Codepen https://codepen.io/Ella33/pen/GjQZRP
$(document).ready( function() {
$( "#close" ).click(function() {
$("#modal").addClass("red");
setTimeout(function() {
$("#modal").remove();
}, 800);
});

How to open div before the class close the div after another class

I want to append div with class before the .left. Its must be close after the .right. I have tried like below but its automatically close in same line.
I also tried wrap() but no luck.
HTML
<!-- <div class="group"> -->
<div class="tp left arrow">Left</div>
<div class="tp bullets">
<div class="round">1</div>
<div class="round">2</div>
<div class="round">3</div>
<div class="round">4</div>
<div class="round">5</div>
</div>
<div class="tp right arrow">right</div>
<!-- </div> -->
JS
$( ".left" ).before( "<div class='group'>" );
$( ".right" ).after( "</div'>" );
You can use wrapAll() method for that
$(".left,.bullets,.right").wrapAll("<div class='group'></div>")
Fiddle
$('.tp').wrapAll('<div class="group" />')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tp left arrow">Left</div>
<div class="tp bullets"><div class="round">1</div><div class="round">2</div><div class="round">3</div><div class="round">4</div><div class="round">5</div></div>
<div class="tp right arrow">right</div>

js child class toggle

How would you toggle the class of an inner div? example:
html:
<div class="masonry">
<div class="item">
<div class="item-content">1
<div class="item-more-content">1+</div>
</div>
</div>
<div class="item">
<div class="item-content">2</div>
</div>
</div>
javascript:
$( function() {
var $container = $('.masonry').masonry({
columnWidth: 60
});
$container.on( 'click', '.item-content', function() {
$( this ).parent('.item').toggleClass('is-expanded');
$( this ).children('.item-more-content').toggleClass('iz-expanded');
$container.masonry();
});
});
.parent works, .children does not.
How to toggle css class of child div, "item-more-content"?
This works fine for me (I would comment but don't have enough points yet). Are you sure you want to toggle class 'iz-expanded' and not 'is-expanded' for '.item-more-content'? - typo?

toggle div display style not work

I want that when load my page first time then <div class="col-md-9 column" id="c9" > will be active but then i click toggle button then class="col-md-9 column" id="c9" goes to hide and
<div class="col-md-12 column" id="c12" will be show. my toggle code work but when i add
this code
if ($('#c9').is(':visible')) {
$('#c12').hide();
}
if ($('#c9').is(':hidden')) {
$('#c12').show();
}
then both of these div not show
<div class="col-md-3 column" id="area_toggle">
</div>
<div class="col-md-9 column" id="c9" >
<div class="col-md-12 column" id="c12" style="display: none">
</div>
</div>
<script>
$( "#menu-toggle" ).click(function() {
$( "#area_toggle" ).toggle( "slow" )
$( "#sidebar" ).toggle( "slow" );
if ($('#c9').is(':visible')) {
$('#c12').hide();
}
if ($('#c9').is(':hidden')) {
$('#c12').show();
}
});
</script>
Your requirement based from the code is a paradox, if i understand correctly you want to show #c9 and hide #c12, then once #area_toggle is clicked show #c12 and hide #c9? This is impossible since c12 is a child of c9 , this means that when #c9 is hidden, #c12 is also hidden.
You are using c9 for comparison, but that element is not toggled, you should use something like this instead:
<div class="col-md-3 column" id="area_toggle">
</div>
<div class="col-md-9 column" id="c9" >
<div class="col-md-12 column" id="c12" style="display: none">
</div>
</div>
<script>
$( "#menu-toggle" ).click(function() {
$( "#area_toggle" ).toggle( "slow" );
$( "#sidebar" ).toggle( "slow" );
if ($('#c12').is(':visible')) {
$('#c12').hide();
} else {
$('#c12').show();
}
});
</script>
You can just use toggle() to toggle the visibility of both the elements instead of using if...else
$("#menu-toggle").click(function () {
$("#area_toggle").toggle("slow")
$("#sidebar").toggle("slow");
$('#c9, #c12').toggle();
});

Categories