CODEWITHSUNDEEP
jquery
Magento 2
Magento 2

Reputation: 133

Slide Down & Slide Up

I am using Slide down & Up it's working fine. But my problem is when user open this page it slide Up if user click then only slide down. 

<script type="text/javascript">
    jQuery(function ($) {
        $(".block-layered-nav dt").click(function () {
            if ($(this).next("dd").css("display") == "none") {
                $(this).next("dd").slideDown(1000);
                $(this).removeClass("closed");
            } else {
                $(this).next("dd").slideUp(1000);
                $(this).addClass("closed");
            }
        });
    });
</script>

What mistake i done

Upvotes: 2

Views: 3845

Answers (3)

Nabeel Shehzad
Nabeel Shehzad

Reputation: 9

<html>

<head>
    <script src="jquery.js">
    </script>
</head>

<body >
<div class="test4" style="border: 1px solid black;">

<h1>Hi </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ducimus, animi provident laudantium necessitatibus odit. Qui quam iusto optio libero cum, nemo perferendis rerum veritatis expedita, est totam dolore natus!</p>
</div>

    <div  class="test1">    
        <button>Show Button</button>
    <button id="test">Button 2</button>
</div>

<script>

    $(document).ready(function(){

        $("button").click(function(){

$("$test4").slideToggle();


});

$("#test").click(function()
{

    $("#test4").slideDown();
});     
    });
</script>
</body>
</html>

Upvotes: -1

Rino Raj
Rino Raj

Reputation: 6264

Add class closed with the element

Working Demo

jQuery(function($) {
  $('dd').hide()
  $(".navigation dt").click(function() {
    if ($(this).next('dd').is(":visible")) {
      $(this).next('dd').slideToggle('slow').toggleClass('close');
    } else {
      $(this).next('dd').slideToggle('slow').toggleClass('close');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <dt>test</dt>
  <dd class="close">sample</dd>
</div>

Upvotes: 2

Damian S.
Damian S.

Reputation: 44

You can just use $.fn.slideToggle() and $.fn.toggleClass() to resolve state detection problem. Solution:

jQuery(function($) {
  $(".navigation dt").click(function() {
    $(this).next('dd').stop(true, false).slideToggle().toggleClass('close');
  });
});
.closed {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <dt>test</dt>
  <dd class="closed">sample</dd>
</div>

You just need to be sure of initial state of the class and CSS display attribute. And, also added $.fn.stop() function to avoid animation glitches.

Upvotes: 1

Related Questions