CODEWITHSUNDEEP
jqueryaccordion
Naveen Sadasivan S
Naveen Sadasivan S

Reputation: 263

Open / Activate the first tab in Accordion

Please help me to activate the first tab. Now all the tabs are closed. I want to open the first tab activate. Following are my codes.

function close_accordion_section() {
    $('.tw-accordion .emp-list-title a').removeClass('active');
    $('.tw-accordion .emp-list-accordion').slideUp(300).removeClass('open');
}

$('.emp-list-title a').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if($(e.target).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.tw-accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
});

This is my jsfiddle demo location. Output is not getting correctly. It shows some error. https://jsfiddle.net/uc7utjsf/

Please help me.

Upvotes: 1

Views: 860

Answers (1)

NiZa
NiZa

Reputation: 3926

You forgot the # sign to use an id selector correctly.

Changes and additions I made:

$('.tw-accordion #' + currentAttrValue)
$(".emp-lst-sps").first().find("a").addClass("active");
$(".emp-lst-sps").first().find(".emp-list-accordion").show().addClass('open');

Demo

$(document).ready(function() {

  $(".emp-lst-sps").first().find("a").addClass("active");
  $(".emp-lst-sps").first().find(".emp-list-accordion").show().addClass('open');

  function close_accordion_section() {
    $('.tw-accordion .emp-list-title a').removeClass('active');
    $('.tw-accordion .emp-list-accordion').slideUp(300).removeClass('open');
  }

  $('.emp-list-title a').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if ($(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();

      // Add active class to section title
      $(this).addClass('active');
      // Open up the hidden content panel   
      $('.tw-accordion #' + currentAttrValue).slideDown(300).addClass('open');
    }

    e.preventDefault();
  });
});
.emp-list-accordion {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tw-accordion">
  <div class="emp-lst-sps">
    <div class="emp-list-title"><a href="review">review</a></div>
    <div id="review" class="emp-list-accordion">
      content Review
    </div>
  </div>
  <div class="emp-lst-sps">
    <div class="emp-list-title"><a href="list">list</a></div>
    <div id="list" class="emp-list-accordion">
      Content list
    </div>
  </div>
</div>

Upvotes: 2

Related Questions