I have some really simple lines of jQuery that are meant to open and close a div when clicking a link. When I click, the div opens fine (and any other open div, will close, which is good). But, when I click the link again the div will not close! I cannot figure out why. Any help would be much appreciated!
HTML:
<a href="../partial-2" id="products">
<div class="products">
<p>products</p>
</div>
</a>
<div class="row product-options products-house shadow">
<div class="col-sm-6 col-sm-offset-3">
....content here, removed for brevity....
</div>
</div>
jQuery:
$(document).ready(function(){
$("#products").on("click", function(e){
e.preventDefault();
$(".active-product").removeClass("active-product");
$(".products-house.shadow").toggleClass("active-product");
});
In my CSS, I just have a display:none for the products-option, and display: block for active-product
While removing the class exclude the .products-house.shadow element using :not() pseudo-class selector.
$(document).ready(function(){
$("#products").on("click", function(e){
e.preventDefault();
$(".active-product:not(.products-house.shadow)").removeClass("active-product");
// --------^^^^----------------------^^^^------
$(".products-house.shadow").toggleClass("active-product");
});
Related
I have one <div>, where there's a lot of <div>s inside of it, and every child <div> gotta an <a>(anchor tag).
so what i'm trying to do is attach click events to the a-tags.
It's been working with a ul listed of mine divs. but i need it to be divs.
working code below:
jQuery:
$('#filterOptions li a').click(function (e) {});
HTML:
<ul id="filterOptions">
<li class="active">All</li>
<li>Premier League</li></li>
</ul>
An what I've tried which also didn't work is:
jQuery:
$('#filterOptions div a').click(function (e) {});
HTML:
<div class="filterOptions">
<div class="col-md-1 col-md-offset-1">
All
</div>
<div class="col-md-2">
<a href="#" class="league2 ">Premier League>
</div>
</div>
Please help to me achieve it.
The issue is you have class filterOptions in html markup and you are using id # in the jQuery code. It should be like:
$('.filterOptions div a').click(function (e) {});
I am trying to hide the current element on click but I have many elements of the same id, i want each one to hide on each click.
I normally use php in a foreach loop to append an incremental value on each of the ID's, but in this scenario I cannot do that.
I have this:
<div id="container">
hide me
SOME TEXT
</div>
<div id="container">
hide me
SOME TEXT
</div>
<script type="text/javascript">
$("#hideme").click(function(){
$(this).hide();
});
</script>
Is there any way in jQuery to hide the CURRENT element on click? My current code will only hide the first element.
Example: https://jsfiddle.net/2rnw224b/
You should not have multiple elements with the same id you should use classes. You simple attach an event listener to all elements with that class name and remove the container when clicked.
Try the example below. I also updated your fiddle.
$('.hideme').click(function(e){
e.preventDefault()
$(this).hide()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
hide me
SOME TEXT
</div>
<div class="container">
hide me
SOME TEXT
</div>
<div class="container">
hide me
SOME TEXT
</div>
<div class="container">
hide me
SOME TEXT
</div>
$("#container a").click(function(){
$(this).hide();
});
Demo: http://jsfiddle.net/sajadtorkamani/3uygzu7e/
I have a page what will have a few buttons on it and on a click of a button I basically need it to swap divs out - I have them wrapped in a parent div with an id and then each div that will be replaced will get it's own id as well. I got this code to work for swapping, but it will be tedious and not good code at all to do this if we end up with 30 or so pairings.
So how do I clean this up so on a click, the active div is set to display: none, and the one clicked is set to display: block?
Here is my jQuery code that is working for now. For this I want the macaroni to display and the farfalle to hide.
$('#macaroniButton').click(function(){
$('#macaroni').toggle();
$('#farfalle').toggle();
});
<div id="topchanger">
<div id="farfalle">
.....
</div>
<div id="macaroni">
.....
</div>
</div>
<div class="circlerow">
<div class="circlepasta" id="macaroniButton">
......
</div>
<div class="circlepasta" id="AnotherButton">
......
</div>
</div>
</div>
You could start with this. Expand my answer accordingly.
$('#macaroniButton').click(function(){
$("#macaroni").show().siblings('div').hide();
});
You can give a class to all the div that you want to show/hide and before handling a click, hide all div with that class. Let's say you give it a class 'item':
<div id="topchanger">
<div id="farfalle" class="item">
.....
</div>
<div id="macaroni" class="item">
.....
</div>
</div>
and your javascript will be:
$('div.item').click(function(){
$('div.item').hide();
$(this).show();
});
Note that $(this) refers to the item that was just clicked.
Hope it hepls
I'm using jQuery to show and hide areas on my site with just a toggle. Which works fine, but if i have multiple elements I want to show and hide individually on the page I have to write a bit of jQuery for each item. Is there a way to do it for a class or ID within the encapsulating class?
heres my jQuery:
jQuery('.collapse').click(function() {
jQuery('#filterArea').toggle('slow', function() {
});
});
And heres my content:
<div class="tabs">
<div class="ui-widget-header">
<div class="collapse" id="boxId">Content Box</div>
</div><br />
<div class="addPadLeftNoFloat" id="filterArea">
<p>Content for box</p>
</div>
</div>
I want to be able to have a few areas on the page with the class of collapse that just close the filterArea within the outer collapse? Or similar? I'm not doing a great job of explaining this! - So if i have two divs with the class of collapse, when i click them the filterarea of that div collapses
Tom
Instead of having filterArea as an id, change it to a class.
<div class="tabs">
<div class="ui-widget-header">
<div class="collapse" id="boxId">Content Box</div>
</div>
<br />
<div class="addPadLeftNoFloat filterArea">
<p>Content for box</p>
</div>
</div>
Also change your JavaScript to this:
jQuery('.collapse').click(function() {
jQuery('.filterArea').toggle('slow', function() {
});
});
A working example.
Edit: if you only want to collapse .filterArea elements with the enclosing .tab element, use JavaScript something like this:
$('.collapse').click(function() {
$(this).closest('.tabs').find('.filterArea').toggle('slow');
});
Updated example.
I guess it's easier to explain using an example:
HTML:
<div class="boxset">
<div class="box_header">
h1
</div>
<div class="box">
This is some text for box 1.
</div>
</div>
<div class="boxset">
<div class="box_header">
h2
</div>
<div class="box">
This is some text for box 2.
</div>
</div>
<div class="boxset">
<div class="box_header">
h3
</div>
<div class="box">
This is some text for box 3.
</div>
</div>
JS:
$('.box_header').bind("click", function() {
$('.box').not($(this).next('.box')).animate({
'width': 'hide'
});
$(this).next().animate({
'width': 'show'
});
});
jsFiddle:
http://jsfiddle.net/rDHMF/
Here is a simple sideways accordion menu. Now when I click on a header (h1, h2, h3), its corresponding content will show and the previously opened one will close. However, I can click again on that same header I just clicked and it will contract and expand itself.
Is it possible to temporarily unbind the click event on the header I just clicked so that the 'active' header will just stay put when I click on it? Then bind again when I click on another header. If yes, how?
This should do:
$('.box_header').bind("click", function() {
$('.box').not($(this).next('.box')).animate({
'width': 'hide'
});
$(this).next().animate({
'width': 'show'
});
});
You don't need to un/rebind the events, just prevent the box from contracting when it's the same
I would do that in a different way. Whenever a user clicks on a header add an active class to the header (and remove it from other headers). And do some other thing if this header already has an active class (only remove a header from this header and animate). This way also allows us to customize styles on active headers.