FAQ Database Discussion Community


Jquery Select the clicked div among other divs with the same class

jquery,css,hidden,addclass,slidetoggle
Basically I have a gallery(grid) that when each individual block is clicked it reveals a hidden div. I have that functionality working. I also have a color overlay on each block that disappears on hover. I also want the hidden div parent block to not have the overlay - when...

How to apply slideUp & slideDown functions to one div at a time?

jquery,slidetoggle,jsfiddle
Everything is in the title: var extended = 0; $('.info_btn_m').off('click'); $('.info_btn_m').on('click', function() { if(extended == 0) { $('.detail_m').slideDown(); extended = 1; } else { $('.detail_m').slideUp(); extended = 0; } }); http://jsfiddle.net/r54vdkv1/ Thanks :)...

Slider toggle works in jsfiddle but not live

javascript,jquery,slider,slidetoggle,jsfiddle
As title states, I made a slider that works in the Jsfiddle preview, but not live. Here is a link to the fiddle: http://jsfiddle.net/kits87/99tz8w2c/16/ Here is the javascript as I put on my site: $(document).ready(function() { var $div1 = $('#work'), $div2 = $('#play'), currentDiv = 'play', $button = $('button'); $div2.hide();...

slideToggle() multiple elements show/hide [duplicate]

javascript,jquery,slidetoggle
This question already has an answer here: Show/Hide Multiple Divs with Jquery 8 answers When an element opens, all others open elements close . I have this code: jQuery(document).ready(function() { jQuery('#servico1').click(function() { jQuery('.descricao2').hide("slow"); jQuery('.descricao3').hide("slow"); jQuery('.descricao4').hide("slow"); jQuery('.descricao1').slideToggle("slow"); }); jQuery('#servico2').click(function() { jQuery('.descricao1').hide("slow"); jQuery('.descricao3').hide("slow"); jQuery('.descricao4').hide("slow");...

Trying to get either one of two panels to slideToggle when button is pressed

javascript,slidetoggle,panels
I'm trying to create a code that makes one of two panels slide down when a button is pressed. Here's my code: http://jsfiddle.net/06szhymc/82/ $(document).ready(function(){ $("#imageslider").click(function(){ rand = Math.floor(Math.random() * 2) + 1; then if(rand==1){ $("#panel").slideToggle("slow"); }else{ $("#panel2").slideToggle("slow"); }); }); <button id="imageslider">Press<button> <div id="panel"><div id="panel"><div class="paneltest" style="background-color:black; color:white; padding:20px;">...

slideToggle is not working on Wordpress

javascript,wordpress,function,slidetoggle
i'm try to add toggle menu on wordpress in mobile but the script is not working but on normal website is working perfectly and when i try to add same script to wordpress template is not working this is the script: <!--responsive toggle menu --> <div class="menu-toggle"><i class="fa fa-bars fa-2x"></i></div>...

Jquery toggle div width on button click

jquery,html,jquery-ui,jquery-animate,slidetoggle
Hello I want to split my page display with divs. Below is my html code. <div id="wrapper"> <div id="divSectionInfo"> </div> <input type="button" value="Toggle screen" class="btn" id="btnSlide"> <div id="divProducts"> </div> </div> div wrapper has 800 px divSection has 300 px and divProducts has 400px. I want to show divSectionInfo full width(800px)/half(300px)...

slideToggle not working when parent link is clicked

jquery,toggle,slidetoggle,slidedown,slideup
I have a list of links in a footer then when you click on the titles along the bottom a panel for each on slides up with links in. If one panel is open and I click another link along the footer, the open panel closes and the link in...

Set scrollbar to zero (once) after toggle a div appearing from top (push down) like Airbnb

javascript,jquery,slidetoggle,scrolltop
i'am trying to make the airbnb.nl effect where a 'how it works' div appears from the top on button click. Then when you scroll down (or click the close button) it disappears again. When the div is hide after scrolling to 630px the scrollbar shoots up so i've set the...

jQuery slideToggle jumps at end of dropdown animation

javascript,jquery,css,slidetoggle
I'm trying to create a sidebar with dropdowns. I'm using Jquery's slideToggle() function for the dropdown animations. My problem is that when the dropdowns animate up and down hiding the other dropdowns, the animation appears choppy and jumpy. I've read some options here but can't seem to find a solution...

jquery level two slides up and level three slides down

jquery,css,menu,slidetoggle
Hopefully this is a small one. I have a three level vertical menu. It is built in wordpress and I am attempting to keep it simple before I start putting in content and such. I have got the sub menus to hide and when you click a level 1 button,...

jQuery is not defined in Wordpress, but my script is enqueued properly

javascript,php,jquery,wordpress,slidetoggle
I am trying to load a separate javascript file mobile-menu.js to my Wordpress theme. When I look at the console, it says, "jQuery is not defined." However, I know that I enqueued my script files correctly. Any ideas? HTML file: <a href="#" id="menu-icon"></a> <!--this line wasn't here originally--> <div id="switchmenu"><!--switchmenu...

Hovering Images on the Left then the Images on the Right will change using Slide Toggle

javascript,jquery,html,css,slidetoggle
Good day. I'm doing some design like this in my banner(saksoff5th.com) I use slideToggle instead. When I hover images on the left the banner images on the right will change. But I'm having difficulties in hovering the images on the right. Like when I hover images on the left, the...

Underline active link slideToggle (jQuery)

jquery,html,slidetoggle,active,underline
I made a text page where information pops up when the user clicks on a link using slideToggle(). When you click on the next link, the previous text passage automatically closes (also using slideToggle). jQuery(document).ready(function() { jQuery('.textbox a').next('.textbox p').hide(); jQuery('.textbox a').click(function() { $('.active').not(this).toggleClass('active').next('.textbox p').slideToggle(); $(this).toggleClass('active').next().slideToggle(); }); }); .textbox { width:...

Scroll to the top of slideToggle

javascript,jquery,html,slidetoggle,scrolltop
I am relatively new to the web development scene and have ran in to some issues with jQuery. I am creating a food menu and using the slideToggle functionality to display different sections of the menu. What I am trying to do is so when the toggle (.food-item) is clicked,...

jQuery button to show/hide multiple divs with same id

jquery,jquery-selectors,click,element,slidetoggle
I have many products being populated dynamically, all with same id and class names. I want each "Buy Now" button to have its own div that toggles with click of button. I do have the ability to assign an incrementing number index to the ids and classes, however, if there's...

JS/HTML - .SlideToggle two tables next to each other

javascript,html,table,slidetoggle
I have two tables with different heights next to each other. I would like the tables to slideToggle independently. When selecting the table headers, currently nothing is happening... The fiddle: http://jsfiddle.net/wod51fvL/ Any comments welcomed!! Thanks The HTML: <h1>Test Heading 1</h1> <table> <tr> <td valign="top"> <table class="tableSort"> <thead> <tr> <th id="clientClick"...

using jQuery slide toggle with min height

javascript,jquery,html,css,slidetoggle
I am trying to use jQuerys slideToggle on a div that has a minimum height. this causes the animation to jump and not move smoothly. I have spent a while now looking for a solution but i am unable to get anything to work. I have made an example on...

jQuery slideUp while sibling div slideDown

javascript,jquery,slidetoggle,slidedown,slideup
I need to make sure only one of the .togglecontent divs show up at once, so when one slides down the other should slide up. Here is what I have so far (function($) { $(document).ready(function() { $('.toggler h3').click(function() { var currentContent = $(this).siblings('.togglecontent'); $('.togglecontent').not(currentContent).slideUp(); currentContent.slideToggle(); }); }); })(jQuery); <div class="toggler-wrap">...

Toggle only this item

javascript,jquery,html,toggle,slidetoggle
i've a problem to toggle only (this) 1 'card' $('a[rel="toggle_comments"]').click(function(){ var div = $('.comments'); $(div, this).slideToggle('slow'); }); <!-- This is a example code --> <section> <div class="mainclass"> [...] <div class="select"> <a href="#" rel="toggle_comments">Test</a> </div> </div> <ul class="comments"> <!-- Content --> </ul> </section> <section> <div class="mainclass"> [...] <div class="select"> <a href="#"...

How to toggle multiple classes for child element on parent click

javascript,jquery,css,toggle,slidetoggle
I am trying to toggle classes using jQuery and I'm struggling to do so. I have my HTML structure & jQuery as below <div class="mainFacet bmargin5"> <div class="head line"> <div class="facet-title" title="Click to collapse"> <h2 class="unit-line">Processor</h2> <span class="icon minus"></span> </div> </div> <ul style="display:inline-block"> <li>i3</li> <li>i5</li> <li>i7</li> </ul> </div> jQuery $('.facet-title').click(function...

SlideDown form above fixed header not sliding back up

jquery,slidetoggle,slidedown
I'm trying to place a slide down form above a fixed header. I can get the div to slide down but I can't get it to slide back up. Here's my fiddle... http://jsfiddle.net/amesy/w83dwwpL/ I've adapted the code in the fiddle form another which can be found here http://jsfiddle.net/darcyclarke/JNRpK/28/light/ As you...

Slidetoggle 2 adjacent divs

javascript,jquery,html,slidetoggle
<div class="unique1">Blabla1</div> <div class="amministrazione">Amministrazione</div> <a href="">some link</a> <a href="">some link</a> <div class="didattica">Didattica</div> <a href="">some link</a> <div class="unique2">Blabla2</div> <div class="amministrazione">Amministrazione</div> <a href="">some link</a> <div class="didattica">Didattica</div> <a href="">some link</a> <a href="">some...

Toggle script automatically rolled up

jquery,toggle,slidetoggle
I have a code <script> jQuery(function($) { $('#toggle1').click(function() { $('.toggle1').slideToggle('slow'); return false; }); $('#toggle2').click(function() { $('.toggle2').slideToggle('slow'); return false; }); </script> <a href="#" id="toggle1">header1</a> <div class="toggle1" style="display:none">content1</div> <a href="#" id="toggle2">header2</a> <div class="toggle2" style="display:none">content2</div> What should I modify to get a result when you click on the first title...

jQuery slideUp toggle close last div

jquery,slidetoggle,slideup
I've got this http://jsfiddle.net/jv4ae32j/ toggle script working just the way I want it apart from one thing I want yo close the div when the last title is clicked $('.toggle').click(function(){ $('aside').slideUp(); $(this).find('aside').slideToggle(); e.stopImmediatePropagation(); }); ...

Jquery toggle jumps

jquery,toggle,slidetoggle,togglebutton
Could someone tell me a solution for this issue? As you can see, the div "jumps" when using the Toggle function. http://codepen.io/AndrewRed/pen/vErjob?editors=101 <p>Text above animation</p> <input type="button" class="btn" Value="Animate"/> <div id="animate"> <p>Text to animate</p> <p>Text to animate 2</p> </div> <p>Text below animation</p> $("input").on('click', function(){ $("#animate").toggle('slow'); }); ...

Ion.RangeSlider 2.0.3

javascript,jquery,html5,css3,slidetoggle
I’m trying to using Ion.RangeSlider 2.0.3 URL : http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html So I want to modify that slider with three colors. Left, Middle, Right likewise. I have attached this image for get idea what I want to need. So i need your help to customize this slider. Thanks. ...

.slideToggle() ONLY items that are collapsed

jquery,slidetoggle
So, I've done a lot of research trying to find this, but can't seem to find something that works. I have multiple divs on a page using .slidetoggle(); to display more content in a child div. What I would like to do is add an "expand all" button that would...

slideToggle and toggleClass not working together?

jquery,html,css,accordion,slidetoggle
I am trying to slideToggle and then afterwards toggleclass, but by adding the toggleclass the slideToggle does not 'slide' anyone know how i can fix this? fiddle and code below. $(function () { $(".expand").on("click", function () { $(this).next().slideToggle().toggleClass('slidein'); $expand = $(this).find(">:first-child"); if ($expand.text() == "\u25B6") { $expand.text("\u25BC"); } else {...

How to run part of a click function only once

jquery,slidetoggle
Every time I click the button, it slide down and run the code. It is good. But if I slide it up and down again, it run the code again. So first time, I have 1,4,5. I click the button again, it slide up, click it again, if I keep...

Sub ul not opening correctly with float:left;

jquery,css,slidetoggle
Here's my tool, I want to create an accordion menu in the left panel: http://www.resolution-studio.ro/new/sticker/designer/ I am using accordion menu from: http://www.resolution-studio.ro/new/sticker/designer/ which works okay for sub li tags untill it does not use float:left; I want to have 80x80 pixel items so I have changed a bit the CSS...

Partially exposed div to slide up when image is clicked

javascript,jquery,html,css,slidetoggle
this might be a weird one but what I am trying to do is make a div slide up from the bottom of the screen when someone clicks an image. To paint this clearer, imagine the Windows desktop, and if you click the start menu image/icon, instead of the start...

Checking :hidden is not working inside element toggle

jquery,slidetoggle
Inside slideToggle(), when element is visible, I want to do a specific task. When, element is hidden, I want to do another task. So, I have arranged the code like this: if($('.element').is(':visible')) { // do something } else { // do something } But, it seems that else method is...

slideToggle and onClick not working when put in wordpress site

jquery,wordpress,onclick,slidetoggle
$('#comment-button').click(function () { $('#comment-panel').slideToggle(); }); #comment-button { padding: 3px 5px; background: #dddeee; border: 1px solid #cccddd; } #comment-panel { display: none; background: #dddeee; width: 300px; height: 120px; } <div id="comment-button">Button</div> <div id="comment-panel">Comments</div> I tried doing a slideToggle and it seemed to work fine on jsfiddle. But when I tried...