?
Solved

Custom JQuery accordion - need help setting first item to be open by default.

Posted on 2012-03-31
1
Medium Priority
?
460 Views
Last Modified: 2012-04-11
Hi,

Found the following accordion example online, works great however I want it to be open at the first item by default. How can I modify code below to allow first item to be open?


<script language="javascript" type="text/javascript">
        $(document).ready(function () {
            //ACCORDION BUTTON ACTION      
            $('div.accordionButton').on('click',function () {
                $('div.accordionContent').slideUp('normal');
                $(this).next().slideDown('normal');
            });

            //HIDE THE DIVS ON PAGE LOAD      
            $("div.accordionContent").hide();

        });
      </script>


<div id="acc-wrapper">
            <div class="accordionButton">Item1</div>
            <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
            <div class="accordionButton">Item2</div>
            <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
            <div class="accordionButton">Item3</div>
            <div class="accordionContent">Content 1<br />Short Example</div>
            <div class="accordionButton">Item4</div>
            <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
      </div>
0
Comment
Question by:jazz__man
[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
1 Comment
 
LVL 3

Accepted Solution

by:
animecyc earned 2000 total points
ID: 37791937
In your javascript change:

$("div.accordionContent").hide();

Open in new window


to:

$("div.accordionContent").not(':first').hide();

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

743 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