CODEWITHSUNDEEP
jqueryhtmlcss
albaneso
albaneso

Reputation: 67

Show one div while hiding others when i click on a link

I'm trying to figure out how to untoggle (hide) all other divs when i click on a navbar link. So far it toggles the divs , but they stay active when i click on a new link. I want them to .slideUp() and the one i click to slideDown This is my code:

<script type="text/javascript">
$(document).ready(function(){

    $(".output .about , .resume").hide();
    $("#about").click(function(e)
    {
        e.preventDefault;
        $(this).find('li').toggleClass('active ');
        $(".about").slideToggle("slow");

    });

    $("#resume").click(function(e)
    {
        e.preventDefault;
        $(this).find('li').toggleClass('active');
        $(".output .resume").slideToggle("slow");

    });
});


    <div class="cont2">
        <ul>
            <a href="#" id="about"><li class="fade-in one " >About</li></a>
            <a href="#" id="resume"><li class="fade-in two">Resume</li></a>
            <a href="#"><li class="fade-in three">Portfolio</li></a>
            <a href="#"><li class="fade-in four">Contact</li></a>
        </ul>
    </div>

    <div class="output">
        <div class="about">
            <p>About</p>
        </div>

        <div class="resume">
            <p>Resume</p>
        </div>
    </div>

EDIT : the code that works properly

$(document).ready(function(){

    $(".cont1").hide();
    $(".cont1").fadeIn(1000);
    $(".output .about , .resume").hide();
    $("#about").click(function(e)
    {
        e.preventDefault();
        $(".cont2 li .active").removeClass('active');

        $(this).find('li').toggleClass('active');
        $(".about").slideToggle("slow");
        $(".resume").slideUp("slow");

    });

    $("#resume").click(function(e)
    {
        e.preventDefault;
        $(this).find('li').toggleClass('active');
        $(".output .resume").slideToggle("slow");

    });
});

Upvotes: 0

Views: 1268

Answers (2)

balzafin
balzafin

Reputation: 1426

I think it would better if you just used one click event for all of your links. That way you don't have to copy your code around so much. Just use the id of your anchor and kind of pair it with the divs class (same name). You already have this is in your HTML so you don't have to change it.

Another thing is that if you want the slideUp (hide) effect to be noticeable, you should run the slideDown (show) effect in its callback. In other words, you want to wait for one animation to stop before running another.

Here's something I came up with:

$(".output .about , .resume").hide();

$("a").click(function (e) {
    e.preventDefault();

    var hiddenDiv = $(".output ." + $(this).attr("id"));
    var visibleDiv = $(".output > div:visible");

    // if all the divs are hidden, just show the desired one
    if (visibleDiv.is(":visible")) {
        visibleDiv.slideUp("slow", function () {
            hiddenDiv.slideDown("slow");
        });
    } else {
        hiddenDiv.slideDown("slow");
    }
});

http://jsfiddle.net/4cvnrh51/

Upvotes: 3

Joe R Casey
Joe R Casey

Reputation: 226

Search for the elements that have the active class and remove it:

$(document).ready(function(){

  $(".output .about , .resume").hide();
  $("#about").click(function(e)
  {
    e.preventDefault();
    $(this).find('li').toggleClass('active');
    $(this).siblings().find(".active").removeClass('active');
    $(".about").slideToggle("slow");
    $(".resume, .portfolio, .contact").slideUp("slow");

  });

  $("#resume").click(function(e)
  {
    e.preventDefault();
    $(this).find('li').toggleClass('active');
    $(this).siblings().find(".active").removeClass('active');
    $(".resume").slideToggle("slow");
    $(".about, .portfolio, .contact").slideUp("slow");
  });
});

Upvotes: 1

Related Questions