Skip navigation
waterstc@pitt.edu
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

 

Thanks!

 
Replies
  • Currently Being Moderated
    Apr 4, 2013 5:33 PM   in reply to waterstc@pitt.edu

    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 waterstc@pitt.edu

    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>

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

              Some Content here for CollapsiblePanelB

         </div>

    </div>

     

    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