Show / hide problem using Image Rotator

Question

I am working on a site with an image rotator (using jQuery Roundabout). I installed in jQuery that when I click on an image, it displays the specific content associated with that image using the following code:

  $('#brand-cou').click(function() {
    $('#brand-details .detail-section').fadeOut(0);
    $('#detail-country-squire').fadeIn("slow");
    return false;
  });

Where # brand-cou is the one containing the image and # detail-country-squire is the section I want to show. This works great, expect me to also have the next and previous arrow, which is an alternative way to move people around the image rotator. My hardest part is getting the right text to show when they are moving around the rotator using these controls. This is the code I have now:

  $('a#next').click(function() {
    if ('li'.id = 'brand-cou' && 'li'.hasClass('roundabout-in-focus') {
      //Do what I need to do
    }
  });

, ".roundabout-in-focus". , if , , A, .roundabout-in-focus, . - . , , , . , , , . - , , . , , li round-out-in-focus, ( , / ), , , - , .

!

Answer 1

@JapanPro, . html. ?:

<ul id="thumbs-brands">
  <li id="brand-qua"><a href="#"><img src="../assets/brand-quality-care.png"></a></li>
  <li id="brand-pro"><a href="#"><img src="../assets/brand-propet.png"></a></li>
  <li id="brand-cou"><a href="#"><img src="../assets/brand-country-squire.png"></a></li>
  <li id="brand-big"><a href="#"><img src="../assets/brand-big-red.png"></a></li>
  <li id="brand-lil"><a href="#"><img src="../assets/brand-lil-red.png"></a></li>
  <li id="brand-joy"><a href="#"><img src="../assets/brand-joy.png"></a></li>
  <li id="brand-joypro"><a href="#"><img src="../assets/brand-joy-professional.png"></a></li>
  <li id="brand-sma"><a href="#"><img src="../assets/brand-small-animal.png"></a></li>
</ul> <!-- end of thumbs-brands -->

<div id="thumb-navigation">
  <a href="#" id="next">Next</a>
  <a href="#" id="previous">Previous</a>
</div>        

<div id="brand-details">
    <div id="detail-country-squire" class="detail-section">
          //Content Here
    </div> <!-- end of .detail-body -->
</div> <!-- end of detail-pro-pet -->