Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 385
  • Last Modified:

How to insert different accordion panels in the same website?

Hi, I'm building my first web site with Dreamweaver CS5.
 I'm trying to insert different accordion panels in various web-pages of the web site, but everytime I customize one of them, all the other take the same properties. How can I solve this problem by keeping them different from one another?
Thanks!!
Francesca
0
cuculla82
Asked:
cuculla82
1 Solution
 
jonahzonaCommented:
Can you post some CSS and HTML please?
0
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
They share same CSS and js files... change your modifications with different file and you're done.
0
 
Jason C. LevineNo oneCommented:
The problem with Spry widgets is that the CSS reference is somewhat hardcoded into the system.  So if you place multiple accordions on one page, you have to play some games with the CSS file if you want them to look different.

So for a simple accordion, the code would be:

<div id="Accordion1" class="Accordion" tabindex="0">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
  </div>

Open in new window


And all you need to do is edit the classes to get a different look.  But if you have two accordions, you need to make it look like this:

<div id="Accordion1" class="Accordion" tabindex="0">
  <div class="instance1 AccordionPanel">
    <div class="instance1 AccordionPanelTab">Label 1</div>
    <div class="instance1 AccordionPanelContent">Content 1</div>
  </div>
  <div class="instance1 AccordionPanel">
    <div class="instance1 AccordionPanelTab">Label 2</div>
    <div class="instance1 AccordionPanelContent">Content 2</div>
  </div>

<div id="Accordion2" class="Accordion" tabindex="0">
  <div class="instance2 AccordionPanel">
    <div class="instance2 AccordionPanelTab">Label 1</div>
    <div class="instance2 AccordionPanelContent">Content 1</div>
  </div>
  <div class="instance2 AccordionPanel">
    <div class="instance2 AccordionPanelTab">Label 2</div>
    <div class="instance2 AccordionPanelContent">Content 2</div>
  </div>

Open in new window


In the CSS file, duplicate the classes and add the instance1 and instance2 in front of the duplicates and then you can style them independently.
0
 
cuculla82Author Commented:
Thank you very much! I'll try as soon as I can!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now