Accordion Issues

Accordion Issues

Hello Everyone:

I just finished creating a simple little accordion for myself. For the most part it works great: Following is the applicable script:

HTML

  1. div>
  2.     <div id="A" class="bar"><h3>Left - Right Lists</h3></div>
  3.     <div id="A1" class="content_hide">
  4.     <span class="containerLeft">
  5.     <ul>
  6.       <li>Left List 1</li>
  7.       <ul><li>Item 1</li><li>Item 2</li><li>Item 3<li></ul>
  8.       <li>Left List 2</li>
  9.      </ul>
  10.     </span>
  11.     </div>
  12.    
  13.     <div id="B"class="bar"><h3>Basic List</h3></div>
  14.     <div id="B1" class="content_hide">
  15.     <ul>
  16.       <li>Item 1</li>
  17.       <li>Item 2</li>
  18.     </ul>
  19.     </div>
  20. </div>
CSS

  1. .content_show
  2. {
  3. display:display;
  4. border: 4px solid #eee;
  5. background-image: url(../images/background.jpg);
  6. }
  7. .bar {
  8.     /* background: url(../images/btt_accordian.jpg) no-repeat center center; */
  9.     background: #8fa564;
  10.     border-top: 1px solid #eee;
  11.     border-bottom: 1px solid #999;
  12.     text-decoration: none;
  13.     color: #000;
  14. }
  15. .bar:hover
  16. {
  17.     background: #999;
  18.     color: #fff;
  19. }
  20. .containerLeft
    {
    max-width:20%;
    float:left;
    margin-left:14px;
    }

    .containerRight
    {
    max-width:20%;
    float:right;
    margin-right:14px;
    }












jQuery

  1. $(document).ready(function(){
  2. var_carry_content='';
  3.     $(".bar").click(function() {
  4.         var_id = $(this).attr('id');
  5.         var_content = "#" + var_id + "1";
  6.    
  7.     if(var_content != var_carry_content)
  8.     {   
  9.         $(var_carry_content).slideUp();
  10.         $(var_content).slideDown();
  11.         $(var_content).addClass('content_show');
  12.         var_carry_content = var_content;
  13.     }
  14.      });
  15. });
So... the above routine works just fine. I have to dress up the css and "make it pretty", but the accordion capabilities are working.

But - when I try to add content in left/right containers then there are problems. Specifically when I change the html to the following:

  1. <div>
  2.     <div id="A" class="bar"><h3>Left - Right Lists</h3></div>
  3.     <div id="A1" class="content_hide">
  4.     <span class="containerLeft">
  5.     <ul>
  6.       <li>Left List 1</li>
  7.       <ul><li>Item 1</li><li>Item 2</li><li>Item 3<li></ul>
  8.       <li>Left List 2</li>
  9.      </ul>
  10.     </span>
  11.     <span class="containerRight"> <!-- adding 'right' container to float my content right -->
  12.     <ul>
  13.       <li>Right List 1</li>
  14.       <ul><li>Item 1</li><li>Item 2</li><li>Item 3<li></ul>
  15.       <li>Right List 2</li>
  16.      </ul>
  17.     </span>
  18.     </div>
  19.    
  20.     <div id="B"class="bar"><h3>Basic List</h3></div>
  21.     <div id="B1" class="content_hide">
  22.     <ul>
  23.       <li>Item 1</li>
  24.       <li>Item 2</li>
  25.     </ul>
  26.     </div>
  27. </div>
Once I add the "right" container the accordion malfunctions. Both left and right containers float the way they should. But the accordion container itself will not stay open - it folds back up and the left and right container content is still visible and "bleeding into" the accordion header below.

And here is the kicker. The reason I decided to build my own little accordion from scratch is because every accordion plugin I tried has the same problem when I add the right container. Some of the plugins even malfunctioned when I used any class that had float attributes assigned.

Does anyone here know why accordions don't function with left-right floating elements. I've tried floating <div>, <span>, and <ul> elements. The results are always the same.
  1. Floating elements bleed into the next accordion header.
  2. Active Accordion content element folds back up - even though content is still visible.
Any advice on this matter would really help.

Thanks Much:

Pavilion