How to refer to div by li element outside that div

Question

on the begining I have to admit that my knowledge about programming is quite basic. I don't understand everything so maybe my question can look little lame but still my ideas run out and I need to ask.

I've used an Slide Elements tutorial and add some sliding Div in to my webside, everything works fine but in this tutorial author used a button element inside parent div and on click inner div slides. I want to use a li element from my navigation section that is outside that divs but i dont know how change the script code to keep the animation in that div. Basically it looks:

HTML:

    <ul id="navigation">
 <li class="about"><a title="A" href="#" > </a></li>
 <li class="search"><a title="P" href="#" ></a></li>
 <li class="photos"><a title="G" href="#" ></a></li>
 <li class="rssfeed"><a title="U" href="#" ></a></li>
 <li class="contact"><a title="K" href="#" ></a></li>
</ul>

    <div id="IDcontent" class="slide" >
<button>slide it</button>
<div class="inner"  style="margin-left: 100%"> test </div>
</div>      

I manage to change script code that an li element triggers a click action not the button, but after click, it not slide the div but it slides a next li element.

SCRIPT CODE:

<script>

$(document).ready(function() {
  $('#navigation li').click(function() {
    var $marginLefty = $(this).next();
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});

  </script>

Any sugestions ?

Big Thanks!

Answer 1

Because of this line of code,

var $marginLefty = $(this).next();

the next li element after what was clicked on is animated since you later do $marginLefty.animate(). If you want to animate the div, you should set marginLefty to the div element. So replace that line with:

var $marginLefty = $('.inner');

To find out which li was clicked, you can do

// $(this) refers to the element that was clicked
$liClass = $(this).attr("class") 

inside the click handler. Then you can change the content of the div based which li was clicked, and by using the html() function. For example,

var content;
if($liClass == 'about'){
 content = 'about clicked';
}
else if($liClass == 'search'){
    content = 'search clicked';
}
//more code here
//more code here
$marginLefty.html(content);

You can find more information about .attr() and .html() over here: http://api.jquery.com/attr/ and http://api.jquery.com/html/

Answer 2

Try this one:

   $(document).ready(function() {
      $('#navigation li').click(function() {
        var $marginLefty = $('a', this);
        $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
            $marginLefty.outerWidth() :
            0
        });
      });
    });

Answer 3

If I understand this correctly, you're wanting a LI element to do the same thing the button element is doing? You can just trigger a click on the button:

$(document).ready(function() {
  $('#navigation li').click(function() {
      $('#IDcontent').find('button').trigger('click');
  });
});

Your button element will need to remain on the page. This will basically run any code attached to the button's click event - whenever you click ANY of your LI elements. You can set this up to work on only 1 list element by changing the selector:

  $('#navigation li.about').click(function() {
   ...
  });

That will attach this functionality to the li class="about" element only.

This works if you're planning on leaving the button on your page. You can simply hide the button in CSS, but that's a bit sloppy. If you decide to remove the button altogether, simply find the Javascript code that the button is using. It will look like this:

$('#IDcontent button').click(function(){ ... });

or something similar. Then just move that code inside the button's click event into the click event for the list element.