0

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

Gopinath Shiva
  • 3,386
  • 4
  • 21
  • 44
gdeleon101
  • 88
  • 2
  • 11

1 Answers1

1
$( 'li a' ).on( 'click', function() {
        $('#1,#2,#3').removeClass( 'active' ).eq( $(this).parent().index() ).addClass( 'active' );
    });
gu mingfeng
  • 724
  • 6
  • 10
  • How can assure that when i click on li #2 it only shows the div id ="2"? I've switched the first two li link hrefs and still the first li only shows the id="1" even if it is pointing to #2. Thanks! – gdeleon101 Jun 06 '16 at 01:15
  • $( 'li a' ).on( 'click', function() { $('#1,#2,#3').removeClass( 'active' );$($(this).attr('href')).addClass('active'); }); This maybe help. – gu mingfeng Jun 06 '16 at 01:24