Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
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
Medium Priority
?
556 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

610 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