Grow your CSS skills. Land your dream job.

Hide Display with JS … Help!

  • # September 10, 2012 at 9:43 pm

    Hey! I need some js to help me with hiding and displaying div’s when a link is clicked/hovered over … oh and I would like all the content that had been displayed to disappear when anywhere on the page is click off of the hidden content … when you hover over the link the content should be displayed (slowly) and when the mouse is moved off it should disappear (slowly) … when it is clicked it (slowly) should appear and stay until the link or page is clicked on …

    so this is what I am looking for ….

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pellentesque, massa sit amet viverra vehicula, mauris nulla dictum nibh, in vulputate tellus nisl non elit. Mauris enim velit, hendrerit non pellentesque nec, rutrum quis lacus. Fusce vulputate ullamcorper eros non hendrerit. In congue tellus eget erat tempor varius nec a leo. Donec porta vulputate consequat. Cras porta volutpat purus ut pretium. Mauris aliquet suscipit tellus at lacinia. Sed fringilla, mauris vitae iaculis viverra, mi nisi bibendum enim, quis interdum enim dolor quis augue. Proin ut ligula vel nulla rhoncus ornare eget at dolor. Integer consectetur, sapien ac tempor vestibulum, magna risus venenatis orci, vel lobortis eros sapien ut justo. Aliquam malesuada risus non est hendrerit interdum. Nullam commodo enim eget lorem tempor nec imperdiet diam dictum. Pellentesque ullamcorper, eros non ullamcorper rutrum, elit enim luctus enim, et scelerisque libero magna a lectus.

    hover/click over me!

    Lots of interesting information …

    hover/click over me for more information!

    Even more interesting information!

    # September 10, 2012 at 9:56 pm

    $(“#div-ID”).on(“click”, function(event){
    $(‘#div-Id-you-want-to-hide’).hide();
    });

    # September 10, 2012 at 9:59 pm

    wow sorry …. I am not sure where the html code went …

    # September 10, 2012 at 10:01 pm

    here is a link to codepen where you can see the html code …http://codepen.io/JosiahBranner/pen/LaJbF

    # September 10, 2012 at 10:04 pm

    We now use `markdown` for posts. If you want to display code inside of your post, you can use backticks ` for inline code (simple wrap your text with one on each side). If you want to display blocks of code, you simply need to indent the text by four spaces:

    like this

    Here’s a link for more info: http://daringfireball.net/projects/markdown/syntax

    # September 10, 2012 at 10:08 pm

    oh ok thanks! :)

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

You must be logged in to reply to this topic.

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