gdeleon101 gdeleon101 - 6 months ago 31
jQuery Question

Show div in off canvas sidebar when clicked on link

I have the code below, and I'm trying to show/hide a div when you click on a link. Basically the link on click will add the "active" class to the div, which in turn will remove the "hide" class and display:block instead. The problem I'm having is that I want this div to display/hide in an off-canvas menu. I can't seem to get it to work.

Styles:

<style>
.hide{
display:none;
}
.active{
display:block;
}
</style>


Links:

<ul id="items" style="float:right;">
<li>
<a href="#1" class="slideLeft">item 1</a>
</li>
<li>
<a href="#2" class="slideLeft" >item 2</a>
</li>
<li>
<a href="#3" class="slideLeft" > item 3</a>
</li>
</ul>


Divs:

<div class="you padded">
<div id="1" class="hide">
<h1>First story</h1>
<p>Lorem ipsum dolor.</p>
</div>
<div id="2" class="hide">
<h1>Second story</h1>
<p>Proin at eros non eros.</p>
</div>
<div id="3" class="hide">
<h1>Third story</h1>
<p>Nunc auctor bibendum eros.</p>
</div>




Script

$( 'li' ).on( 'click', function() {
$('#1,#2,#3').removeClass( 'active' ).eq( $(this).index() ).addClass( 'active' );
});


Here is a link to the actual page:

http://lavacable.com/satc/eb/rightonly.html

Answer
$( 'li a' ).on( 'click', function() {
        $('#1,#2,#3').removeClass( 'active' ).eq( $(this).parent().index() ).addClass( 'active' );
    });
Comments