.cycle jquery, use button to show selected div (by id or class)?

Question

I'm new to jquery so please stay with me and be gentle.

I've used the .cycle code as a navigation and i would like to click a button i.e. "about us" and it take you to the div containing the "about us" contents

I have this working but noticed i've lost my animation, i know what the problem is but because of my lack of knowledge i don't know how to fix it and these forums have been good to me learning this code, so i thought i would ask.

Here is the javascript code i have, like i say, this works and diverts me to the chosen div, what it doesn't do is show the slide effect anymore. I would also like it to show and hide the divs.

<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
    $('#container').cycle({
        fx: 'scrollHorz',
        speed: 'fast',
        timeout: 0,
    });
    jQuery('.index_navigation_1').click(function () {
        window.location.href = '#about_us_container';
        return false;
    });
    jQuery('.index_navigation_2').click(function () {
        window.location.href = '#contact_us_container';
        return false;
    });
});
</script>

Here is the HTML code

<div id ="container">
  <div id="index_container">
    <div id="header">home</div>
    <div id="index_navigation">
      <div id="nav_buttons" class="index_navigation_1">ABOUT US</div>
      <div id="nav_buttons" class="index_navigation_2">CONTACT US</div>
      <div id="nav_buttons" class="index_navigation_3">BUTTON 3</div>
      <div id="nav_buttons" class="index_navigation_4">BUTTON 4</div>
    </div>
    <div id ="about_us_container">
    <div id="header">about us</div>
    </div>
    <div id="navigation">
      <div id="nav_buttons" class="about_us_navigation_1">ABOUT US BUTTON 1</div>
      <div id="nav_buttons" class="about_us_navigation_2">ABOUT US BUTTON 2</div>
      <div id="nav_buttons" class="about_us_navigation_3">ABOUT US BUTTON 3</div>
      <div id="nav_buttons" class="about_us_navigation_4">ABOUT US BUTTON 4</div>
      <div id="nav_buttons" class="about_us_navigation_5">ABOUT US BUTTON 5</div>
    </div>
    <div id="contact_us_container">
      <div id="header">contact us</div>
    </div>
    <div id="navigation">
      <div id="nav_buttons" class="contact_us_navigation_1">CONTACT US BUTTON 1</div>
      <div id="nav_buttons" class="contact_us_navigation_2">CONTACT US BUTTON 2</div>
      <div id="nav_buttons" class="contact_us_navigation_3">CONTACT US BUTTON 3</div>
      <div id="nav_buttons" class="contact_us_navigation_4">CONTACT US BUTTON 4</div>
      <div id="nav_buttons" class="contact_us_navigation_5">CONTACT US BUTTON 5</div>
    </div>
  </div>
</div>

and just incase, here the CSS

#container {
  height:417px;
  width: 320px;
  font-family: Helvetica, Arial, sans-serif;
  color: #FFF;
}
#scroll_container {
  height:417px;
  width: 320px;
  background-color: #0FF;
}
#index_navigation {
  background-color: #EC008C;
  width: 320px;
}
#navigation {
  background-color: #EC008C;
  width: 320px;
}
#nav_buttons {
  height: 60px;
  width: 320px;
  background-image: url(images/buttons/pink_button.svg);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 60px;
  color: #FFF;
  text-align: center;
}
#header {
  background-color: #9CF;
  height: 177px;
  width: 320px;
}

Thanks

Answer 1

Never used the Cycle plugin but according to the documentation and demos available you can go to a specific slide by calling .cycle(index).

$('.index_navigation_1').click(function() { 
    $('#container').cycle(1); 
    return false; 
}); 

Have a closer look at 'goto slide' demo and Another 'goto' demo (aka: Poor-man's pager).

UPDATE

You can make use of index() to get the position of the first element within the jQuery object relative to its sibling elements.

$('#container').find('#about_us_container').index()

Something even more complicated than typing the index yourself is to create links with classes and a separate click event handler for each link and slide.

You should try something like this instead;

$('.goToSlide').click(function(e) {
  e.preventDefault();
  var selector = $(this).data('slide');
  var slideIndex = $(selector).index();
  $('#container').cycle(slideIndex);
});

together with;

<a href="#" class="goToSlide" data-slide="#about_us_container">Goto #about_us_container</a>
<a href="#" class="goToSlide" data-slide="#contact_us_container">Goto #contact_us_container</a>

Notice that I wrote this example to illustrate the concept and that it hasn´t been tested.

UPDATE 2

Make sure you´re using valid HTML. Start with a basic setup and advance from that.

$('#slide_containers').cycle({
    fx: 'scrollHorz',
    speed: 'fast',
    timeout: 0
});

$('.goToSlide').click(function(e) { // Bind click event to all elements with the class goToSlide
  e.preventDefault();
  var selector = $(this).data('slide'); // Get the data-slide attribute value
  //console.log(selector, $(selector), $(selector).index()); // DEBUG
  var slideIndex = $(selector).index(); // Get the index of the slide element
  $('#slide_containers').cycle(slideIndex); // Cycle to slide by index
});​

See my jsFiddle demo.