Grow your CSS skills. Land your dream job.

Help with re-hiding the element after it has appeared

  • # August 24, 2012 at 11:48 am

    Hey! I need some help with this code … I have it so that when the page is first viewed nothing is there, but when you click on each link they appear one by one (and if you click the same one it then disappears)… but I want the other div to disappear when the next link is clicked on and not just stack underneath each other …

    Any help would be appreciated!!
    Thanks!!!

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



























    # August 25, 2012 at 6:37 am

    I’ve made it on CodePen: http://codepen.io/Druid-of-Luhn/pen/wdKHv

    So, here is a simple bit of code you just copy/past into the <head> tag. Just change the > into a ‘>’.




    And I would change your ‘main_content’ div to this:




    Camps
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel.
    ...



    Register
    Aliquam erat volutpat. Quisque pretium, erat ac laoreet pulvinar, sem ipsum malesuada erat, nec tristique arcu erat molestie arcu. Aliquam ante nisi, elementum a tristique eget, imperdiet quis justo. Praesent vehicula nulla massa. Morbi quam libero, aliquam quis elementum id, egestas ultrices eros.
    ...



    References
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat port a vel.
    ...



    Contact
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel.
    ...




    # August 28, 2012 at 10:40 pm

    Thanks So much!!!!

    # August 28, 2012 at 11:53 pm

    If you are using jQuery, you can also simple use the following:

    $('someSelector').on('click', function() {
    $(this).toggle(duration);
    });

    Make sure to replace someSelector with an actual css selector, and duration with an actual time in milliseconds.

    # August 29, 2012 at 3:22 am

    Just using toggle isn’t enough: he wants all other elements to be hidden when you click that one as well, not just itself.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".