gdeleon101 gdeleon101 - 1 year ago 74
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.




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


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


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

Here is a link to the actual page:

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