Niko
  • Administrator

      Reputation : 319
      Registered on : 2012-02-22
      Posts : 2366
      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.co.uk/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

    Finish!
    • Veteran staff member

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

      Niko
      • Administrator

          Reputation : 319
          Registered on : 2012-02-22
          Posts : 2366
          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

        avatar
        • 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

          Niko
          • Administrator

              Reputation : 319
              Registered on : 2012-02-22
              Posts : 2366
              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

            Nathan
            • Veteran staff member

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