Skip navigation
AdithyaShreyas
AdithyaShreyas Calculating status...
Currently Being Moderated

Script to Close all the collapsible panels on click of one collapsible panel

Oct 8, 2009 2:22 PM

Hi All,

 

Please help me with modifying the script or a new script to suffice the following.

 

I have around 5 to 6 collapsible panels in many html files. There is a huge content under each panel and thats the reason I want to collapse i.e., close all the open panels and open the panel that is clicked on.

 

that is initially i click on panel 1 - > Panel 1 opens and contents are displayed.

now I click on panel 2 - > panel 1 should close and panel 2 should open.

 

Please help me acheive this.

 

Thanks in advance.

1012 Views   3 Replies   Latest reply: kbaum425, Dec 14, 2011 2:56 PM
 
Replies
  • Arnout Kazemier
    Currently Being Moderated
    1. Arnout Kazemier,
    Oct 10, 2009 12:16 PM   in reply to AdithyaShreyas
    Report

    Wouldn't a accordion panel suite your needs more?

     

    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSam ple.html

     

     

    If not, you would be required to create separate functions that call the .close() method of your collapsible panel.

     
    |
    Mark as:
  • AdithyaShreyas
    Currently Being Moderated
    2. AdithyaShreyas,
    Oct 12, 2009 12:21 PM   in reply to AdithyaShreyas
    Report

    Hi Arnout Kazemier,

     

    Thank you so much. I never thought of this and never tested this option. This is exactly what I wanted.

     

    Thanks again.

     

    Regards

    Shreyas

     
    |
    Mark as:
  • kbaum425
    Currently Being Moderated
    3. kbaum425,
    Dec 14, 2011 2:56 PM   in reply to AdithyaShreyas
    Report

    To close the remaining panels you can just use the onclick method and however many panels you have just add them to the list spacing them out with a " , "

     

    Here is an example of 3 panels that close and open, upon clicking on one of the panels.

     

    <div id="CollapsiblePanel1" class="CollapsiblePanel">

      <div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel2.close(),CollapsiblePanel3.close()">Tab 1</div>

      <div class="CollapsiblePanelContent">Long-Sleeve Prices</div></div>

    <div id="CollapsiblePanel2" class="CollapsiblePanel">

      <div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel1.close(),CollapsiblePanel3.close()">Tab 2</div>

      <div class="CollapsiblePanelContent">T-Shirt Prices</div>

    </div>

    <div id="CollapsiblePanel3" class="CollapsiblePanel">

      <div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel1.close(),CollapsiblePanel2.close()">Tab 3</div>

      <div class="CollapsiblePanelContent">Hat Prices</div>

    </div>

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points