Question

I have created a little example,please have a look,
http://jsfiddle.net/bWTwL/
I want to have a panel like this so that:
1.li(home).click > slide panel left >content fadeIn
2.X(click) > content fadeOut > slide panel right

Now,I have 7 list items like home,about me etc.I want that when user clicks on any list item,the particular content for that list item (home,about me etc) should fadeIn.
and if the panel is already visible then only content should fadeIn/Out on click.
I thought to write each function for each of them but that would be a very long messy code.

I thought something like html5 data-attribute to do the job but failed.Please see the same effect here to have a better understanding: http://www.unpezvivo.com/proyectos/themeforest/cspp/02/#

Thanks in advance.

Answer 1

Something along these lines will work fine.

1. CSS

div.panel {
    display:none;
    position: absolute;
    top: 0;
    width:70%;
    right:0%;
    height: 100%;
    z-index: 3;
    margin: 0;
    overflow:hidden;
    background-color:black;
}
.panel div.content {
    display:none;
    font-family:arial;
    color:white;
    padding:50px;
    overflow:hidden;
}
span.close {
    position:absolute;
    right:10px;
    top:15px;
    cursor:pointer;
}​

2. Markup

<ul id="menu">
    <li><a id="home" href="#">Home</a></li>
    <li><a id="about-me" href="#">About Me</a></li>
</ul>

<div class="panels">
    <div class="panel home">
        <div class="content">
            <span class="close">X</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
        </div>
    </div>
    <div class="panel about-me">
        <div class="content">
            <span class="close">X</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
        </div>
    </div>
</div>

3. jQuery

$(document).ready(function() {
    var $panels = $('.panels > .panel');
    $('#menu > li').on('click', 'a', function() {
        $panels.filter('.'+this.id).trigger('togglePanel');
    });
    $panels
        .on('togglePanel', function(){
            var $this           =   $(this)
              , $activePanels   =   $panels.filter(':visible').not($this);
            if ($activePanels.length) {
                $activePanels
                    .one('panelHidden', function(){
                        $this.is(':visible')
                        ? $this.trigger('hidePanel')
                        : $this.trigger('showPanel');
                    })
                    .trigger('hidePanel');
            } else {
                $this.is(':visible')
                ? $this.trigger('hidePanel')
                : $this.trigger('showPanel');
            }
        })
        .on('hidePanel', function(){
            var $this = $(this);
            $this.find('.content').fadeOut(500, function() {
                $this.animate({
                    'width': 'hide'
                }, 1000, function(){
                    $this.trigger('panelHidden');
                });
            });
        })
        .on('showPanel', function(){
            var $this = $(this);
            $this.animate({
                'width': 'show'
            }, 1000, function() {
                $this.find('.content').fadeIn(500, function(){
                    $this.trigger('panelShown');
                });
            });
        });
    $panels.find('.content .close').on('click', function() {
        $(this).closest('.panel').trigger('togglePanel');
    });
});​

---

I have used the pub/sub pattern, which makes things easier. We minimize the redundant code. And the work flow is easier to follow.

I would strongly suggest that you use namespaces for custom events (e.g togglePanel, hidePanel, showPanel, …).
I didn’t do that in this code, because it is already complicated for novice scripters, and it is left to you as a homework to take this code further on.