Accordion + bxslider

Accordion + bxslider

I'm trying to use the accordion effect within a portfolio but I'm having trouble getting it to work. What I'd like to happen, is that when you click on one of the images or links in a portfolio row, the accordion kicks in revealing a div with relevant information. I'm using bxslider to slide between content divs for that portfolio row. The same holds true for subsequent portfolio rows.

Hope that makes sense. Below is some code to help illustrate.

I'm pretty new to both jquery and javascript. Any help would be very much appreciated.

Ignotus

  1.  <script>
    $(function() {
          $( "#accordion" ).accordion(
              {



  2.             header: '> div.rowContainer > div.col-1 > div.indent2 > a'
  3.           }
          );
    });
    </script>






  6. div id="accordion">
  7.         <div id="row0" class="rowContainer">
  8.                 <div class="col-1">
  9.                         <div class="indent2">
  10.                                 <a class="switcher set0">
  11.                                         <img class="img-indent" alt="" src="box0.jpg" />
  12.                                 </a>
  13.                                 <span class="txt4">Here's some text</span>
  14.                                 <a class="more-link">Click for more information</a>
  15.                         </div>
  16.                 </div>
  17.                 <div class="col-1">
  18.                         <div class="indent2">
  19.                                 <a class="switcher set0">
  20.                                         <img class="img-indent" alt="" src="box1.jpg" />
  21.                                 </a>
  22.                                 <span class="txt4">Here's some text</span>
  23.                                 <a class="more-link">Click for more information</a>
  24.                         </div>
  25.                 </div>
  26.                 <div class="col-1">
  27.                         <div class="indent2">
  28.                                 <a class="switcher set0">
  29.                                         <img class="img-indent" alt="" src="box2.jpg" />
  30.                                 </a>
  31.                                 <span class="txt4">Here's some txt</span>
  32.                                 <a class="more-link">Click for more information</a>
  33.                         </div>
  34.                 </div>
  35.         </div> <!-- /row0 -->
  36.         <div class="rowContent">
  37.                 <div class="content_slide">
  38.                         <h2>THIS IS FOR BOX0</h2>
  39.                         <p>Content for BOX0</p>
  40.                 </div> <!-- /content_slide (box0) -->
  41.                 <div class="content_slide">
  42.                         <h2>THIS IS FOR BOX1</h2>
  43.                         <p>Content for BOX1</p>
  44.                 </div> <!-- /content_slide (box1) -->
  45.                 <div class="content_slide">
  46.                         <h2>THIS IS FOR BOX2</h2>
  47.                         <p>Content for BOX2</p>
  48.                 </div> <!-- /content_slide (box2) -->
  49.         </div> <!-- /rowContent (row0) -->
  50.        
  51.         <div id="row1" class="rowContainer">
  52.                 <div class="col-1">
  53.                         <div class="indent2">
  54.                                 <a class="switcher set0">
  55.                                         <img class="img-indent" alt="" src="box3.jpg" />
  56.                                 </a>
  57.                                 <span class="txt4">Here's some text</span>
  58.                                 <a class="more-link">Click for more information</a>
  59.                         </div>
  60.                 </div>
  61.                 <div class="col-1">
  62.                         <div class="indent2">
  63.                                 <a class="switcher set0">
  64.                                         <img class="img-indent" alt="" src="box4.jpg" />
  65.                                 </a>
  66.                                 <span class="txt4">Here's some text</span>
  67.                                 <a class="more-link">Click for more information</a>
  68.                         </div>
  69.                 </div>
  70.                 <div class="col-1">
  71.                         <div class="indent2">
  72.                                 <a class="switcher set0">
  73.                                         <img class="img-indent" alt="" src="box5.jpg" />
  74.                                 </a>
  75.                                 <span class="txt4">Here's some txt</span>
  76.                                 <a class="more-link">Click for more information</a>
  77.                         </div>
  78.                 </div>
  79.         </div> <!-- /row1 -->
  80.         <div class="rowContent">
  81.                 <div class="content_slide">
  82.                         <h2>THIS IS FOR BOX3</h2>
  83.                         <p>Content for BOX3</p>
  84.                 </div> <!-- /content_slide (box3) -->
  85.                 <div class="content_slide">
  86.                         <h2>THIS IS FOR BOX4</h2>
  87.                         <p>Content for BOX4</p>
  88.                 </div> <!-- /content_slide (box4) -->
  89.                 <div class="content_slide">
  90.                         <h2>THIS IS FOR BOX5</h2>
  91.                         <p>Content for BOX5</p>
  92.                 </div> <!-- /content_slide (box5) -->
  93.         </div> <!-- /rowContent (row1) -->
  94.        
  95. </div> <!-- /accordion -->