Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    I'm new to jQuery and need help with the accordion widget. I have got the accordion to work, and all I want to do now is create a link on my page that will change the panels. I know the panel headers change the elements, but I want other links on my page to do it too.

    Here's my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Experiments</title>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){
    $("#accordion").accordion({ active: 0, collapsible: true})
    });
    function change()
    {
    $('#accordion').accordion('option', 'active', 2);
    }


    </script>
    </head>
    <body style="font-size:65%;" >
    <div id="accordion" style="width:266px; padding:0px;">

    <h3><a href="#">Section 1</a></h3>
    <div style="height:384px; padding:1px;" >
    <img src="imageOne.jpg" border="0" />
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div style="height:384px; padding:1px;">
    <img src="imageTwo.jpg" border="0" />
    </div style="height:384px; padding:1px;">
    <h3><a href="#">Section 3</a></h3>
    <div style="height:384px; padding:1px;">
    <img src="imageThree.jpg" border="0" />
    </div>


    </div>

    <!-- I want this link to change the active element -->

    <a href="#" onClick="change()">change</a>

    </body>
    </html>

    Any ideas?

  2.  

  3. #2
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    Note: I found the answer

    $("#accordion").accordion('activate', 0);

    using this will let you 'activate' a specific element.

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    cool cool! thanks for posting the solution!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

add json result accordian

,

onclick change accordion element

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com