jQuery Accordion Example

jQuery Accordion Example

by Adi Jaya

HTML

<div class="ts-acordeon">
  <a class="ts-acordeon-title first" href="#section-1" data-target="#section-1">Section-1</a>
  <div class="ts-acordeon-body open" id="section-1">
    <p>
      dsdfsdf sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdf sdfsdfsd
    </p>
  </div>
  <a class="ts-acordeon-title" href="#section-2" data-target="#section-2">Section-2</a>
  <div class="ts-acordeon-body" id="section-2">
    <p>
      dsdfsdf sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdf sdfsdfsd
    </p>
  </div>
  <a class="ts-acordeon-title last" href="#sectuin-3" data-target="#section-3">Section-3</a>
  <div class="ts-acordeon-body" id="sectuin-3">
    <p>
      dsdfsdf sdfsdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdf sdfsdfsd
    </p>
  </div>
</div>

CSS

.ts-acordeon {
    border: 1px solid #3f83bf;
    background: white;
}

.ts-acordeon-title {
    display: block;
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    background: #4497e0;
    border-bottom: 1px solid #3f83bf;
    color: #fff;
}

.ts-acordeon-title.last {
    border-bottom: 1px solid transparent;
}

.ts-acordeon-body {
    padding: 10px;
    margin: 0;
    display: none;
}

/* if no script */
.ts-acordeon-body:target, .ts-acordeon-body.open {
  display: block;
}

JavaScript

$( document ).ready(function(){
    $( ".ts-acordeon-title" ).click(function(){
        var parent = $( this ).parents( ".ts-acordeon" );
        var target = $( this ).attr( "href" );
        parent.find( ".ts-acordeon-body" ).removeClass( "open" );
        $( target ).addClass( "open" );
    });
});