How to insert different accordion panels in the same website?

Posted on 2011-04-26
Last Modified: 2013-11-19
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?
Question by:cuculla82
    LVL 13

    Expert Comment

    Can you post some CSS and HTML please?
    LVL 19

    Expert Comment

    by:Rikin Shah
    They share same CSS and js files... change your modifications with different file and you're done.
    LVL 70

    Accepted Solution

    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 class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent">Content 2</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 class="instance1 AccordionPanel">
        <div class="instance1 AccordionPanelTab">Label 2</div>
        <div class="instance1 AccordionPanelContent">Content 2</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 class="instance2 AccordionPanel">
        <div class="instance2 AccordionPanelTab">Label 2</div>
        <div class="instance2 AccordionPanelContent">Content 2</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.

    Author Closing Comment

    Thank you very much! I'll try as soon as I can!

    Featured Post

    Course: HTML5 Mobile App Development with PhoneGap

    PhoneGap can help you leverage your already existing HTML5, JavaScript, and CSS skills in order to create and deploy cross-platform mobile apps.This program comprehensively covers HTML5 mobile app development from top to bottom.

    Join & Write a Comment

    Building “do-it-yourself” web sites has become an epidemic. There are so many blogs, web sites and even books that "teach" you how to build your web site in a few extremely simple and easy steps. Building a web site has become easier than boiling an…
    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now