Skip navigation
Currently Being Moderated

How do you place Spry inside of Spry with different CSS

Apr 4, 2013 12:54 PM

Tags: #spry #panels #collapsible

I have a Spry collaspible panel on a web page, and I want to place INSIDE of it, several more collasbsible panels, however, I want the interior panels to use a separate stype sheet.  How do I do that?


Collaspible Panel1

    Collaspible panel A

    Collaspible panel B

    Collaspible panel C

Collaspible Panel 2


Panels 1&2 use the same CSS, and A,B, &C use a different CSS



  • Currently Being Moderated
    Apr 4, 2013 5:33 PM   in reply to

    Use the ID of the panel to change the style as in

    #CollapsiblePanel2 .CollapsiblePanelTab {

        background: red;


    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 5, 2013 12:16 AM   in reply to

    To add to Ben's suggestion, you could also assign a class to each child panel such as this:


    <div id="CollapsiblePanel1">

         <div id="CollapsiblePanelA" class="red">

              Some Content here for CollapsiblePanelA


         <div id="CollapsiblePanelB" class="blue">

              Some Content here for CollapsiblePanelB




    And style the classes.

    Mark as:

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