Hi I'm looking for a way to change my current jQuery code which currently slides though two div containers and would like the navigation to be more dynamic/generic. So basically, if I add more <li> links and content containers, then the jQuery code shouldn't have to be modified as it needs to be setup in a way to automatically adapt. Instead of having to hardcode each <li>'s click function for each section, the code must know which <li> has been clicked and which content should be displayed. $('.one').on('click',function(){ $('#content-container').css({'margin-left':'0px'}); }); $('.two').on('click',function(){ $('#content-container').css({'margin-left':'-100%'}); }); Please note that my container has a width of 100% and works perfectly as it is right now. See working example on JSFiddle: http://jsfiddle.net/ianblom/gv4qf1u5/1/ I'm new to jQuery and would appreciate any help in this regards. Thanks!!
Just create an ID on the clicked li-item that corresponds with a value on the content-container. Also, why are you using classes for the li-items instead of IDs? That can become troublesome if you have more instances of the class elsewhere (which is also the only reason for having a class in the first place). Also, why the "on"-method? Do you add these li-items dynamically? If not, there's no reason using "on", just use "click" - something like this: $('#menulist li').click(function() { var clickedID = $(this).attr('id'); $('.content_container').css({'margin-left':'-100%'}); $('#content_'+clickedID+'').css({'margin-left':'0px'}); }) Code (markup): That should make sure that all the not-clicked items disappear, and the actual clicked item shows up. Here's an example: http://jsfiddle.net/gv4qf1u5/2/