I have four different divs with slideToggle function. I set them to slidetoggle on click, and they work fine. However, I want the rest of the divs to close when one div is clicked. can anyone help?
below is the code I have so far.
<div id="01"><p>title</p></div>
<div id="01_sub"><p>content</p></div>
<div id="02"><p>title</p></div>
<div id="02_sub"><p>content</p></div>
<div id="03"><p>title</p></div>
<div id="03_sub"><p>content</p></div>
<div id="04"><p>title</p></div>
<div id="04_sub"><p>content</p></div>
$('#01_sub').hide();
$('#01').click(function() {
$('#01_sub').slideToggle('medium');
});
$('#02_sub').hide();
$('#02').click(function() {
$('#02_sub').slideToggle('medium');
});
$('#03_sub').hide();
$('#03').click(function() {
$('#03_sub').slideToggle('medium');
});
$('#04_sub').hide();
$('#04').click(function() {
$('#04_sub').slideToggle('medium');
});
so basically, if I click #01, I want #02,#03,#04 to stay closed or to be closed. and if I click #02, I want the rest to close.
<div id="01" class="toggle"><p>title</p></div>
<div id="01_sub"><p>content</p></div>
<div id="02" class="toggle"><p>title</p></div>
<div id="02_sub"><p>content</p></div>
<div id="03" class="toggle"><p>title</p></div>
<div id="03_sub"><p>content</p></div>
<div id="04" class="toggle"><p>title</p></div>
<div id="04_sub"><p>content</p></div>
then
var $toggles = $('.toggle'), $subs = $toggles.next().hide();
$toggles.click(function(){
var $next = $(this).next().stop(true, true).slideToggle('medium');
$subs.not($next).slideUp();
});
Demo: Fiddle
You should use something like this:
http://jsfiddle.net/WbYu9/2/
$('.title').click(function(){
$('.showed').removeClass('showed');
$(this).addClass('showed');
$("div[id*='sub']").slideUp();
if($(this).hasClass('showed')){
$("div[id='"+$(this).attr('id')+"_sub']").slideDown();
}
})
this is more elastic form.
Related
I am working on a drop down menu button that when clicked displays the previously hidden div under it.
This code works without $(this).next but it will display all div's with class .menudrop because there are multiple buttons and drop downs on the page; I am trying to only change the display on the next .menudrop after the .dropclick that was pressed.
JsFiddle: https://jsfiddle.net/jeffd/nuen3735/1/
<div class='playbox'>
<div class='playbox2 playboxplayer player'>
<div class='play' key='respect.mp3' name='Respect' tag='tagtest'></div>
</div>
<div class='playbox2 playboxbpm bpm'>85 BPM</div>
<div class="playbox2 playboxname name">Respect</div>
<div class='playbox2 playboxkeywords keywords'>Slow, Smooth, RnB</div>
<div class='playbox2 playboxlength length'>02:12</div>
<div class='playbox2 playboxbuy buy'>
<div class='mp3buy droptrack' data-product-id='Respect' data-product-key='3c31060e1038c3fe3e9cb0f069d6f33b'>+</div>
</div>
<div class='menudrop'>(dropdown)</div>
</div>
$(".droptrack").on('click', function() {
$(this).next(".menudrop").slideToggle('display', function(i, v) {
return v == 'none' ? 'inline-block' : 'none'
});
});
$(this).next() moves to the next sibling. In your code, .menudrop is not a sibling of .droptrack, but of its father. What you should do is:
$(this).parent().next('.menudrop')
(Tip: proper HTML formatting would help you next time)
$(this).parent().next('.menudrop')
I'm trying to show hidden rows one at a time on button click, but they all show at once since they have class "row" - the 1st row is shown by default and the rest are hidden
I can't use Id selectors since it's server side and dynamic, so how can I only show the immediate next row/sibling on each click until there are none left? I could append a counter to each row class but that wouldn't help when trying to select the next row in jQuery with that counter
This is what I have which shows all rows on one click
<script>
$(".myButton").click(function() {
$('.container .row').next('.row:hidden').slideDown();
});
</script>
<div class="container">
<!-- 1st row not hidden by default -->
<div class="row">
<div class="row">
<div class="row">
</div>
Thanks for help in advance!
$('.container .row:visible').last().next('.row:hidden').slideDown();
If all you're doing is showing them in a sequential order, then you don't need to track which are active. You can simply use the visibility to always choose the last.
All you do is add the :visible to the row selection, to find all visible rows; then use the last() method to only reference the last of that stack. This allows next() to be called for only one element (the last one), and not all the rows in the container.
To simplify this even more (and call fewer methods), you could choose to only select the first hidden row: $('.container .row:hidden:first').slideDown(); or $('.container .row:hidden').first().slideDown();
Fiddle
If you add the class "selected" to the first row than you could do this:
<script>
$(".myButton").click(function() {
$('.container .row.selected')
.removeClass('selected')
.hide()
.next()
.addClass('selected')
.slideDown();
);
</script>
<div class="container">
<div class="row selected">
<div class="row">
<div class="row">
</div>
You could try iterating through the collection to display the correct one. See this JSFiddle: http://jsfiddle.net/gjqb6m83/
var i = 0;
var collection = $(".row");
$(".myButton").click(function() {
$(collection).css('display', 'none');
$(collection[i]).slideDown();
i++
i = i % collection.length;
});
you can use :nth-child()
$(document).ready(function() {
var counter = 1;
$(".myButton").click(function() {
counter++;
$('.container .row').hide();
$('.container .row:nth-child(' + counter + ')').slideDown();
});
});
.row {
display:none;
}
.row:nth-child(1) {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">My Button</button>
<div class="container">
<div class="row">row 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
<div class="row">row 4</div>
<div class="row">row 5</div>
</div>
Make use of another jQuery-pseudo-selector :first
$(".myButton").click(function() {
$('.container .row:hidden:first').slideDown()
});
and dont forget to close your divs! Look at https://jsfiddle.net/kswmktce/1/
Yet another solution. This one shows just one at a time, and starts over when finished.
$(".myButton").click(function() {
$(".row:visible").next().slideDown();
$(".row:visible").first().hide();
if (!$(".row:visible").length)
$(".row").first().slideDown();
});
.row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="myButton">Click ME</button>
<div class="container">
<div class="row">a</div>
<div class="row">b</div>
<div class="row">c</div>
<div class="row">d</div>
<div class="row">e</div>
</div>
I am new to javascript and couldnt find answer online (I feel like its out there since this seems pretty simple thing, I might not be using the right search terms though)
I am working with the code in this jfiddle:
http://jsfiddle.net/ApoG/f7qqq6k2/4/
$('.item').click(function(){
if( document.getElementById("one").style.display != "none") {
document.getElementById("one").style.display = "none";
} else {
document.getElementById("one").style.display = "block";}
var $this = $(this),
tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
$this.toggleClass('big');
$this.find('.item-content').stop().animate( tileStyle );
$container.isotope( 'reLayout' )
});
When you click a div, it takes the 'item' class and changes its properties.
My goal is to have image or one type of text in a widget when its small and another text or image when its expanded on click. I am going to achieve that by changing div custom properties when its clicked using an if statement in my javascript. (right now testing with changes to display)
My questions is...since 'item' class is selected on click, how can I get the DIV ID on click? (right now I hard coded div id)
Thank you.
With JQuery:
$('div').click(function(){
alert(this.id);
});
JSFiddle Demo, with your full code
With Pure JS:
var div = document.getElementsByTagName("div");
for(var i=0; i<div.length; i++){
div[i].onclick = function(){
alert(this.id);
}
}
JSFiddle Demo
Thank you for the toggle tip. I used that to make my code work and show different things in the box depending on the click of the div.
Here is what I ended up doing:
https://jsfiddle.net/ApoG/z3x6hqLe/
<script>
function toggleText1() {
$('#one_one').toggle();
$('#one_two').toggle();
}
function toggleText2() {
$('#two_one').toggle();
$('#two_two').toggle();
}
</script>
<div id="container">
<div class="item">
<div id=one style=display:"none" class="item-content" onclick="toggleText1()">
<div id=one_one class="text" >Show More</div>
<div id=one_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=two style=display:"none" class="item-content" onclick="toggleText2()">
<div id=two_one class="text" >Show More</div>
<div id=two_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=three style=display:"none" class="item-content"></div>
</div>
</div>
I am definitely sure there is a more optimal way to define all the toggle but as I mentioned earlier I am a complete newb so hopefully with more tinkering I will figure that one out.
I have a menu where I'd like to retrieve the text within the div so I tried writing something like this
$(".link").click(function() {
var linkValue = $(".link").text();
alert(linkValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<div class="link">Home</div>
<div class="link">Apartment</div>
<div class="link">Contact</div>
<div class="link">About us</div>
</div>
But it takes all the values of each class. Is it possible to make it take only the div's text I clicked?
Use this inside the click function:
$(".link").click(function(){
var linkValue = $(this).text();
alert(linkValue);
});
Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});