CODEWITHSUNDEEP
jquerycss
joe
joe

Reputation: 1135

Smoothly sliding up and down content when tab is clicked

Jsfiddle - accordion

HTML

          <div class="accordion">
            <div id="step-1">
             <a href="#step-1" class="tab">Step 1 - Information</a>
              <div class="content">
                <div style="background: yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis, arcu aliquam tempor ultrices, est arcu vehicula eros, in iaculis mauris mauris ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempus velit libero, vel dapibus dui vulputate sollicitudin. Etiam cursus mauris magna, et condimentum mauris rutrum at. Nam lectus eros, accumsan nec ligula at, euismod fringilla lectus. Fusce ac egestas neque, nec accumsan arcu. Nam consequat sem et interdum rutrum. Nam adipiscing massa et congue dignissim. Morbi cursus libero urna, in mollis ligula dignissim ac. Suspendisse et lacinia nibh, at convallis nunc. Vestibulum ipsum nulla, tincidunt id tempus id, sollicitudin quis nunc. Suspendisse potenti.

                </div>
              </div>
            </div>
            <div id="step-2">
              <a href="#step-2">Step 2 - Select</a>
              <div class="content">
                <div style="background: green;">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis, arcu aliquam tempor ultrices, est arcu vehicula eros, in iaculis mauris mauris ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempus velit libero, vel dapibus dui vulputate sollicitudin. Etiam cursus mauris magna, et condimentum mauris rutrum at. Nam lectus eros, accumsan nec ligula at, euismod fringilla lectus. Fusce ac egestas neque, nec accumsan arcu. Nam consequat sem et interdum rutrum. Nam adipiscing massa et congue dignissim. Morbi cursus libero urna, in mollis ligula dignissim ac. Suspendisse et lacinia nibh, at convallis nunc. Vestibulum ipsum nulla, tincidunt id tempus id, sollicitudin quis nunc. Suspendisse potenti.

                  </div>
                </div>
                </div>
          </div>
        </div>

CSS

    .accordion .tab {
  border-top: 1px solid #5b5b5b;
  display: block;
  height: 50px;
  text-decoration: none;
  color: #888;
}

.accordion .tab:hover,
.accordion div:target .tab {
  color: #000;
  border-top: 1px solid #7c7c7c;
}

.accordion div .content {
  display: none;
}

.accordion div:target .content {
  display: block;
}

.accordion > div {
  height: 50px;
  overflow: hidden;
}

.accordion > div:target {
  height: 300px;
}

JS

 $('.accordion .tab').on('click', function(event) {
        var parent_tab = $(this).parent();
        if (parent_tab.hasClass('active'))
            $(".accordion .tab div.content:visible").slideToggle("normal");
        else {
            $(".accordion .tab div.content:visible").slideToggle("normal");
            $(this).parent().find(".content").slideToggle("normal");
        }
    });

The issue is that with css3, it does not behave as same as the website fortheloveoflaundry.com

So tried jquery to achieve the smooth sliding accordion - When tabs are clicked once or twice, the panel does not slide up or down smoothly. Think JQuery is not working right.

Help appreciated

Upvotes: 0

Views: 546

Answers (1)

King King
King King

Reputation: 63337

You already used slideToggle to animate it, so you don't need any CSS transition as well as CSS code changing the height in the :target rule. So many CSS code in your demo can be removed (I just commented them out). Here is the updated script:

//hide the content intially
$('.accordion div .content').slideToggle(0);   
$('.accordion .tab').on('click', function(event) {
    var parent_tab = $(this).parent();
    if (parent_tab.hasClass('active')) return;                    
    $('.active div.content').slideToggle();
    $(this).next("div.content").slideToggle();              
    $('.accordion .active').removeClass('active');
    parent_tab.addClass('active');       
});

Demo.

UPDATE: If you want the collapsible feature like in the accordion widget in jQuery UI, you can try this demo instead.

Upvotes: 2

Related Questions