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();
});
Related
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();
}
I'm using the .each() jQuery function together with the $(this) selector to effect a hovered div, but because the given divs are close to one another, the $(this) selector selects more than one element if I move the mouse too fast.
Is there any way to make sure to force $(this) not to select more than one element?
Here is my HTML:
<div class="row">
<div class="col-md-4 donation 180">
<div class="box">
<div class="cover">
<h2>Freedom<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 200">
<div class="box">
<div class="cover">
<h2>Sovereignty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 400">
<div class="box">
<div class="cover">
<h2>Royalty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
</div>
And here is my jQuery:
if($(window).width() < 800 ) {
$(".form").show();
$(".cover").hide();
} else {
$(".donation").each(function() {
$(this).hover(function() {
$(this).children($(".box")).addClass("animated flipInY");
$(this).children($(".box")).children($(".cover")).fadeOut("", function() {
$(this).siblings($(".form")).show();
});
}, function() {
$(this).children($(".box")).removeClass("animated flipInY");
$(this).children($(".box")).children($(".form")).fadeOut("", function() {
$(this).siblings($(".cover")).show();
});
});
});
}
I would appreciate your help, Thank You!
You don't need to use $(this). You can use the value from each.
$(".donation").each(function(i, val) {
alert($(val).attr('class'));
});
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?
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/
I currently traverse my divs to create the illusion of separate pages using jQuery like this:
function nextForm() {
$(".Page:visible").hide( ).next( ".Page" ).show( );
}
function prevForm() {
$(".Page:visible").hide( ).prev( ".Page" ).show( );
}
This is my main page where all the content is loaded:
<div class="Page" id="DealerInfo" style="display: block;">
<script>$( "#DealerInfo" ).load( "formPages/DealerInfo.php" );</script>
</div>
<div class="Page" id="AdditionalLocations" style="display: none;">
<script>$( "#AdditionalLocations" ).load( "formPages/AdditionalLocations.php" ); </script>
</div>
<div class="Page" id="OwnerInfo" style="display: none;">
<script>$( "#OwnerInfo" ).load( "formPages/OwnerInfo.php" );</script>
</div>
This is just a small snippet of the main page. Now what I am looking to accomplish is; If a certain field on the form is equal to "1" I want to skip the AdditionalLocations div but if it is greater than "1" then I want it to show the "AdditionalLocations" div. I have tried using nextUntil('#OwnerInfo') but it will still display the AdditionalLocations div. Can anyone dive me a solution to this?
Here is a jsfiddle
add a .not("#AdditionalLocationss") selector, and you must if else