Solved

How do I have the second panel in a jquery accordian open as the default on page load

Posted on 2011-02-10
3
552 Views
Last Modified: 2012-05-11
I need to have item 2 open on page load instead of item 1.  How do I do that?
_______________________________________________________________________
<script type="text/javascript">
$(document).ready(function(){
      
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
 

//On Click
$('.acc_trigger').click(function(){
      if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
            $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
            $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
      }
      
      else if( $(this).next().is(':visible') ) { //If immediate next container is closed...
            $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
             
      }

      
      return false; //Prevent the browser jump to the link anchor
});

 

});
</script>

----This is the page code---

<div id="accordian">
<div class="container">
<p class="acc_trigger"><a href="#1">1)&nbsp;&nbsp; &nbsp;Item 1</a></p>
<div class="acc_container">
<div class="block">
blah blah item 1


</div>
</div>
</div>
<div class="container">
<p class="acc_trigger"><a href="#2">
2)&nbsp;&nbsp; &nbsp;Item 2</a></p>
<div class="acc_container">
<div class="block">
blah blah item2

</div>
</div>
</div>
<div class="container">
<p class="acc_trigger"><a href="#3">
3)&nbsp;&nbsp; &nbsp;Item 3</a> </p>
<div class="acc_container">
<div class="block">
blah blah item 3
</div>
</div>
</div>

----------------------------------
Live code at http://www.therptsite.com/becomeapractitioner.asp
0
Comment
Question by:vmoore99
3 Comments
 

Author Comment

by:vmoore99
ID: 34899941
I figured it out...changed the :first to eq(1)...works.

 
0
 

Accepted Solution

by:
ee_auto earned 0 total points
ID: 36123149
Question PAQ'd and stored in the solution database.
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to dynamically set the form action using jQuery.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question