Forums

JosiahB

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 ....

  <div id="main_content">

   <div id="paragraph">

        <p>

             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.

                  <a href="#" class="popover">hover/click over me!</a>

                  <div class="hidencontent">

                         <p>
                              Lots of interesting information ... 

  <a href="#" class="anotherpopover">hover/click over me for more information!    </a>

                         </p>

                  </div><!--end of hidencontent-->

                       <div class="morehidencontent">

                            <p>

                                 Even more interesting information!

                            </p>

                       </div><!--end of morehidencontent-->
        </p>

   </div><!--end of paragraph-->

  </div><!--end of main_content-->

workinclasshero

$("#div-ID").on("click", function(event){ $('#div-Id-you-want-to-hide').hide(); });

JosiahB

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

JosiahB

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

TheDoc

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

JosiahB

oh ok thanks! :)

treehouse : what would you like to learn today?

Forums

Hide Display with JS ... Help!