HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    Show/hide button

    avatar
    • Administrator

        Reputation : 315
        Registered on : 2012-02-22
        Posts : 2362
        School of codes courses: coming soon
      Show/hide button

      Description


      With this tutorial you will have a button to show/hide the message (like a spoiler for all the pages)

      Set up


      First, add this code in your javascript codes and put it in all pages
      Code:
      function ShowHide(divId)
      {
      if(document.getElementById(divId).style.display == 'none')
      {
      document.getElementById(divId).style.display='block';
      }
      else
      {
      document.getElementById(divId).style.display = 'none';
      }
      }
      Then use this html codes to put text and marker Wink

      This will show you the button to click to show/hide
      Code:
      <a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

      And this code will contain the message!
      Code:
      [b]Note: Paste this two latest codes in the same place[/b]
      Code:
      <div class="mid" id="HiddenDiv" style="DISPLAY: none" >
      This text was hidden
      </div>



      Customize the tutorial


      You can change text style and the messages

      Demostration


      Here you are a demo of this: http://codes.forumotion.pro/h7-hide-show

      Technical problems



      The tutorial was tested on this forum and with the browser Google Chrome; If you notice that the tutorial doesn't work for a browser or for a version of forum (PhpBB2, PhpBB3, PunBB, Invision) contact an administrator and we will fill this field with your reporting.

      Thanks, the staff
      For every problem or question please, contact us in the section Support for the tutorials, The staff will answer you as soon as it is possible...

      Friendly,
      The team of the Forum of Codes.



      Niko wants you in the team Guest

      Community manager and Administrator at Forumattivo.com

      avatar
      • Veteran staff member

          Reputation : 4
          Registered on : 2012-02-25
          Posts : 69
        Very nice tutorial :) Good job niko! :)

        avatar
        • Administrator

            Reputation : 315
            Registered on : 2012-02-22
            Posts : 2362
            School of codes courses: coming soon
          Cl0uD wrote:Very nice tutorial :) Good job niko! :)
          Thanks Wink



          Niko wants you in the team Guest

          Community manager and Administrator at Forumattivo.com

          • Veteran staff member

              Reputation : 11
              Registered on : 2012-03-27
              Posts : 116
            Yeah, I have to agree with Cl0ud, it's very helpful, I'm sure I'll use this tutorial in future. :)
            You've got my respect, Niko. yes

            avatar
            • Administrator

                Reputation : 315
                Registered on : 2012-02-22
                Posts : 2362
                School of codes courses: coming soon
              Cyborg112233 wrote:Yeah, I have to agree with Cl0ud, it's very helpful, I'm sure I'll use this tutorial in future. :)
              You've got my respect, Niko. yes

              ahaha thanks!



              Niko wants you in the team Guest

              Community manager and Administrator at Forumattivo.com

              avatar
              • Veteran staff member

                  Reputation : 7
                  Registered on : 2012-06-26
                  Posts : 108
                nice it's like a toggle


                YOUR BANNER HERE
                728x90
                DMCA.com Protection Status
                © PunBB | Contact | Report an abuse