Home/ Questions/Q 8052643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T07:35:48+00:00

What I’m trying to do: #leftSide #rightSide (display:none) _______________ _______________________________________________ | | | |

  • 0

What I’m trying to do:

#leftSide          #rightSide (display:none)
 _______________ _______________________________________________
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |     1. content fades in on link click         |
|               |     2. new link click fades out old content   |
|               |     3. new content fades in                   |
|               |                                               |
|               |                                               |
|               |click -> fade in -> click -> fade out + fade in|  
|               |                                               |
|               |                                               |
|_______________|_______________________________________________|

Every time I click on a link in a category, I want to fade in #rightSide with the content of that link, then if I click a new link, the old content fades out and the new content fades in and so on so forth for all other links.

What I have so far works in the way that I click on a link, and said div fades in, then I click a second link, then the second div fades in right underneath instead of fading out the old div and fading in the new one.

<body>
    <script>
        $(document).ready(function() {

            $('#div_1, #div_2').addClass('js');
            $('a[rel^=div]').click(function(){
                $('#' + this.rel).fadeIn();
            });

        });
    </script>
    <!--CONTAINER-->
    <div id="container">
        <!--LEFTSIDE-->
        <div id="leftSide">
            <div class="logo"></div>
            <div class="portfolio">
                <h1>blog</h1>
                <h1>portfolio</h1>
                    <ul>
                        <li><a href="#" rel="div_1">Link 1</a></li>
                        <li><a href="#" rel="div_2">Link 2</a></li>
                    </ul>
                <h1>photography</h1>
                    <ul>
                        <li>test</li>
                        <li>another</li>
                    </ul>
            </div>
        </div>
        <!--RIGHTSIDE-->
        <div id="rightSide">
            <div id="div_1">Div 1</a>
            <div id="div_2">Div 2</a>
        </div>
    </div>
    <!--CONTAINER-->
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    demo jsBin

    $('#div_1, #div_2').addClass('js');


$('.portfolio a').click(function(e){
  
  e.preventDefault();                      // prevent dafault anchor behav.
  
  var rel = $(this).attr('rel');           // grab our rel
  $('#'+rel).fadeIn().siblings('div').fadeOut();
  
  
});
    • 0