CODEWITHSUNDEEP
javascriptjquerycsszurb-foundationaccordion
Uncle Iroh
Uncle Iroh

Reputation: 386

Reverse Accordion Direction

Here is the Zurb Accordion Foundation Documentation

How do I reverse the direction my Zurb Accordion opens?

Here is the demo link - and access code is 000

I wish for the accordion to slideup / vertically up / upwards - not down. Pure CSS would be wicked, but if J$ works, that's great too!

:)

Thanks for your attention

Upvotes: 0

Views: 1406

Answers (2)

PraJen
PraJen

Reputation: 606

Try using this

I ve customised according to it. So that it comes upwards... i think it ll help you 

.accordion .accordion-navigation.active > a, .accordion dd.active > a {
      background: #e8e8e8;
       position:relative;
        top:85px; // Change this
      }
    .accordion .accordion-navigation > a, .accordion dd > a {
      background: #efefef;
      color: #222222;
      padding: 1rem;
      display: block;
      font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
      font-size: 1rem; }
      .accordion .accordion-navigation > a:hover, .accordion dd > a:hover {
        background: #e3e3e3; }
    .accordion .accordion-navigation > .content, .accordion dd > .content {
      display: none;
      padding: 0.9375rem; }
      .accordion .accordion-navigation > .content.active, .accordion dd > .content.active {
        display: block;     
        background: white; 
        position:relative;
        top:-55px; // Change this too
        }

The only thing u have do is... u got to position the child div...

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

Try like this:

JS:

$(".accordion").on("click", "dd:not(.active)", function (event) {
  $("dd.active").removeClass('active').find(".content").slideUp("slow");
  $(this).addClass('active').find(".content").slideToggle("slow");
  });

Upvotes: 0

Related Questions