CODEWITHSUNDEEP
jqueryhtml
CRAIG
CRAIG

Reputation: 1029

JQuery SlideDown is Sliding Down and then Back Up

This seems like it should be straightforward, but when my items slide down, it immediately slides right back up whether I click on it or not.

JavaScript

var jq = jQuery.noConflict();
jq(document).ready(function() {
    jq('.btn-slide').click(function() {
        jq('.show-buttons').slideDown(150);
    });
    jq('.btn-slide').click(function() {
        jq('.show-buttons').slideUp(500);
    });  
});

HTML

<div class="top-button-container">                      
     <ul class="top-top">       
          <li><a class='btn-slide thb-btn top-buttons' href='#'>VIEW HOMES</a></li>
          <li class="show-buttons"><a class='thb-btn top-buttons' href='/deals' ><i class='fa fa-home'></i> NEW HOME DEALS</a></li>
          <li class="show-buttons"><a class='thb-btn top-buttons' href='http://testing.com' ><i class='fa fa-home'></i> PRE-OWNED</a></li>
     </ul>
</div>

TESTING ENVIRONMENT: https://www.w3schools.com/code/tryit.asp?filename=FG1ZDK5KDO2L

Upvotes: 0

Views: 358

Answers (1)

Amir Shahbabaie
Amir Shahbabaie

Reputation: 1412

That's because both your click functions fire up.You could use slidetoggle instead and only once.

jq('.btn-slide').click(function(){

jq('.show-buttons').slideToggle(150); });

Or if you want different timing, you can check to see if items are visible or not via css

jq('.btn-slide').click(function(){
 if (jq('.show-buttons').css('display')=='block')
 jq('.show-buttons').slideDown(500);
else
 jq('.show-buttons').slideUp(150);
 });

Upvotes: 1

Related Questions