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
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 trying to create a Greasemonkey userscript that will click on one of the divs on the page. They don't refer to a link, more likely a JS/Ajax function, but I can't tell if that is true. So the problem is that this script does nothing. Jquery functions like .remove() work, but .click() does not. What exactly is wrong? I tried searching questions on this topic, but none seemed to help.
Code on page:
<div style="display: block;" class="oitm">
<div class="item">
<img class="smallimg" src="">
</div></div>
<div style="display: none;" class="oitm">
<div class="item">
<img class="smallimg" src="">
</div></div>
My code:
$( document ).ready(function() {
var reqItem = $('.oitm[style*="display: block"]');
$(reqItem).click();
});
Please note, that
reqItem.click();
does not work as well.
Upd: there is also a jquery code, but it's placed outside of the elements I posted above (#offer.left is an element where a clicked item is supposed to show up after it's clicked).
<script>
$("#offer").on( "click", ".item", function() {
if ($('#offer .left').children().size() < 9) {
$(this).parent().appendTo('#offer .left');
}
});
</script>
Your code works as expected: http://jsfiddle.net/5zddqx28/ .
JS:
$( document ).ready(function() {
$('.oitm[style*="display: block"]').click(function() {
alert('clicked');
});
var reqItem = $('.oitm[style*="display: block"]');
$(reqItem).click();
});
Make sure you put onclick listener before your .click(); call.
Your code works fine:
<div style="display: block;" class="oitm">
<div class="item">Top Div
<img class="smallimg" src="">
</div>
</div>
<div style="display: none;" class="oitm">
<div class="item">Bottom Div
<img class="smallimg" src="">
</div>
</div>
$( document ).ready(function() {
var reqItem = $('.oitm[style*="display: block"]').click();
$(reqItem).on('click',function(){ alert('I was clicked'); });
$(reqItem).click();
});
https://jsfiddle.net/7xnLoumt/
A selector that looks at the style attribute only works for browsers that format the style in exactly that way, or leaves the attribute in the original format when the code is parsed. You can use the :visible selector to find the visible elements:
var reqItem = $('.oitm:visible');
I have some divs in my page, and each one of them has got a content I want to toggle via jQuery.
This is actually how my code looks like:
$('.my_div').click(function() {
$( ".my_div_B" ).slideToggle( "slow" );
});
$('.my_div2').click(function() {
$( ".my_div_B2" ).slideToggle( "slow" );
});
$('.my_div3').click(function() {
$( ".my_div_B3" ).slideToggle( "slow" );
});
and so on... of course it's not the best way to do that, repeating the name of the divs always in the same part of code.
HTML pattern:
<div class="my_div">
<img />
<img />
<div class="my_div_B">text</div>
</div>
How can I make it shorter without opening ALL my divs clicking on $('this')?
- ps. I know there are some similar questions, but the answers seem to be specific for that markup.
You can check if div has specific class value like:
//select div with class attribute starts with my_div
$('div[class^="my_div"]').click(function() {
//find child element div with class start my_div_B
$(this).children("div[class^='my_div_B']").slideToggle("slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_div">
<img src='http://placehold.it/200x100' />
<img src='http://placehold.it/200x100' />
<div class="my_div_B">text</div>
</div>
<div class="my_div2">
<img src='http://placehold.it/200x100' />
<img src='http://placehold.it/200x100' />
<div class="my_div_B2">text</div>
</div>
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 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();
});