Question

iI need some help with this one.
HTML

<div class="sidebar">
<ul>
    <li>
        <a href="{{URL::to('artworks')}}" class="action-link discover">
        <span class="action-icon discover-icon"></span>
        <span class="action-label">Discover</span></a>
    </li>
    <li>
        <a class="action-link viewlist disabled showlink">
        <span class="action-icon collection-icon"></span>
        <span class="action-label">ViewList</span></a>
    </li>
    <li>
        <a class="action-link filters showlink">
        <span class="action-icon filter-icon"></span>
        <span class="action-label">Filters</span></a>
    </li>
    <li>
        <a class="action-link share showlink">
        <span class="action-icon share-icon"></span>
        <span class="action-label">Share</span></a>
    </li>
</ul>
<div class="sidebar-content">
<div class="watchlist-content">
<h2>Watchlist</h2>
<ul>
    <li class="facebook"><a href="#"><span class="icon"></span></a></li>
    <li class="twitter"><a href="#"><span class="icon"></span></a></li>
    <li class="pinterest"><a href="#"><span class="icon"></span></a></li>
    <li class="google"><a href="#"><span class="icon"></span></a></li>
</ul>
</div>
<div class="share-content">
<h2>Share</h2>
<ul>
     <li class="facebook"><a href="#"><span class="icon"></span>Facebook</a></li>
     <li class="twitter"><a href="#"><span class="icon"></span>Twitter</a></li>
     <li class="pinterest"><a href="#"><span class="icon"></span>Pinterest</a></li>
     <li class="google"><a href="#"><span class="icon"></span>Google+</a></li>
</ul>
</div>
<div class="filters-content">
<h2>Filters</h2>
<ul class="core">
     <li class="cat-icon"><a href="list.html"><span class="icon"></span>Categories</a></li>
     <li class="artists-icon"><a href="artist.html"><span class="icon"></span>Artists</a></li>
     <li class="style-icon"><a><span class="icon"></span>Styles</a></li>
</ul>
</div>
</div>

And my poorly written Jquery

$('.filters').toggle(
    function(){
        if($('.share-content').is(':visible'))
            {
            $('.share-content').hide();
            $('.filters-content').show();
            }
        else{
            $('.filters-content').css({'display': 'block'}, {queue:false});
            $('.sidebar').stop().animate({left:'255px'}, {duration: 300, queue:false});
            $('.content-with-list').children().stop().animate({'margin-left':'255px'}, {duration: 300, queue:false});
            }
    },
    function()
    {
            $('.sidebar').stop().animate({left:'0'}, {duration: 300, queue:false});
            $('.content-with-list').children().stop().animate({'margin-left':'0'}, {duration: 300, queue:false});
    });


    $('.share').toggle(
    function()
    {
        if($('.filters-content').is(':visible'))
            {
            $('.filters-content').hide();
            $('.share-content').show();
            }
        else{
            $('.share-content').css({'display': 'block'}, {queue:false});
            $('.sidebar').stop().animate({left:'255px'}, {duration: 300, queue:false});
            $('.content-with-list').children().stop().animate({'margin-left':'255px'}, {duration: 300, queue:false});
            }
    },
    function()
    {
        $('.sidebar').stop().animate({left:'0'}, {duration: 300, queue:false});
        $('.content-with-list').children().stop().animate({'margin-left':'0'}, {duration: 300, queue:false});
    });

So even though the code looks terrible it was working for two blocks but now I need to add third one and I’m stuck on this one.I would really like to know how can I make code with little repetitions and make my sidebar open only once shift between content and then close the sidebar if the same link was clicked.

Thank you for your patience in advance.

Answer 1

jsBin demo

$('.sidebar li').click(function() {
    var el = $('.sidebar-content > div').eq( $(this).index() );
    check = el.is(':visible') ? el.hide() : ($('.sidebar-content > div').hide()) (el.show());
});