title: jQuery Vallenato Accordion Display
body: <p>This jQuery accordion script displays the first accordion content by default. How would I set the third accordion content to display by default?</p>
  
  <pre><code>$(document).ready(function()
  {
  //Add Inactive Class To All Accordion Headers
  $('.accordion-header').toggleClass('inactive-header');
  
  //Set The Accordion Content Width
  var contentwidth = $('.accordion-header').width();
  $('.accordion-content').css({'width' : contentwidth });
  
  //Open The First Accordion Section When Page Loads
  $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
  $('.accordion-content').first().slideDown().toggleClass('open-content');
  
  
  // The Accordion Effect
  $('.accordion-header').click(function () {
      if($(this).is('.inactive-header')) {
          $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
          $(this).toggleClass('active-header').toggleClass('inactive-header');
          $(this).next().slideToggle().toggleClass('open-content');
      }
  
      else {
          $(this).toggleClass('active-header').toggleClass('inactive-header');
          $(this).next().slideToggle().toggleClass('open-content');
      }
  });
  
  return false;
  });
  </code></pre>
  
  <p><a href="http://www.switchroyale.com/vallenato/" rel="nofollow noreferrer">http://www.switchroyale.com/vallenato/</a></p>