4 Replies Latest reply on Mar 5, 2010 6:08 AM by gwhPoster

    Show hide div

    gwhPoster Level 1

      Hi everyone,

       

      I have an H4 heading containing some text. Below this is a div which contains a form that I wanted to be hidden by default and then when someone clicks on the H4 the div with the form will be revealed. Is this possible to do in Dreamweaver C4?

       

      Appreciate any advice.

        • 1. Re: Show hide div
          osgood_ Level 8

          You've pretty much answered your own question.

           

          You use the Show-Hide elements in Dreamweavers 'behaviour' menu. Window>Behaviours>Show-Hide elements. Make sure you have a <div> on your page with an 'id'. <div id="hiddenForm">Form goes here</div>. Set its visibility to be hidden with some css.

           

          #hiddenForm {

          visibility: hidden;

          }

           

          Click on the h4 tag then go through the steps above.

           

           

          Here's some simple code below to help you understand what's going on. A show behaviour is applied to the h4 tag to show the hidden <div> when clicked.

           

          You apply a hide behaviour to the hidden <div> to hide itself when you mouseout of it.

           

           

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

          <title>Untitled Document</title>

          <style type="text/css">

          #hiddenForm {

          visibility: hidden;

          }

          h4 {

          cursor: pointer;

          }

          </style>

          <script type="text/javascript">

          <!--

          function MM_showHideLayers() { //v9.0

          var i,p,v,obj,args=MM_showHideLayers.arguments;

          for (i=0; i<(args.length-2); i+=3)

          with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];

          if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

          obj.visibility=v; }

          }

          //-->

          </script>

          </head>

          <body>

          <h4 onclick="MM_showHideLayers('hiddenForm','','show')">Click for form</h4>

          <div id="hiddenForm" onmouseout="MM_showHideLayers('hiddenForm','','hide')" >Form</div>

          </body>

          </html>

          • 2. Re: Show hide div
            gwhPoster Level 1

            Thanks for the reply,

             

            I just tried it out and it works great. Just a couple of things though - I'd like the h4 to be a toggle so that if you click it once it reveals the div and if you click it again it hides it. Is this possible? Also I noticed that when I used visibility: hidden that this just made the div invisible whereas I'd like it to be taken out of the flow and then revealed. Is this also possible?

             

            Appreciate any further assistance.

            • 3. Re: Show hide div
              osgood_ Level 8

              gwhPoster wrote:

               

              Thanks for the reply,

               

              I just tried it out and it works great. Just a couple of things though - I'd like the h4 to be a toggle so that if you click it once it reveals the div and if you click it again it hides it. Is this possible? Also I noticed that when I used visibility: hidden that this just made the div invisible whereas I'd like it to be taken out of the flow and then revealed. Is this also possible?

               

              Appreciate any further assistance.

               

              In that case its much better to use a Spry collapsible panel.

               

              Insert>Spry Collapsible Panel

               

              The rest is automatically generated by Dreamweaver.

               

              One thing you will need to change is the default opening state of the panel.

               

              Look for the associated script that Dreamweaver inserts into the page, at the bottom.

               

              <script type="text/javascript">
              <!--
              var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
              //-->
              </script>

               

              Change it to as below:

               

              <script type="text/javascript">
                  var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: false });
              </script>

              1 person found this helpful
              • 4. Re: Show hide div
                gwhPoster Level 1

                Ok great - I'll give that a go.

                 

                Thanks again for the advice.