Using bootstrap can make show button and hidden button.

What Will I Learn?

You will learn you will learn about programming languages
You will learn you will learn how to create a show button
You will learn you will learn how to create a hidden button

Requirements

You must have basic programming language
You must have basic about HTML
You should have basic about bootstrap

Difficulty

Basic

Tutorial Contents

In this tutorial we will create the show button and the hidden button. pertama buka aplikasi notepad, kebetulan saya menggunakan notepad atau bisa juga anda menggunakan sublime text.

 <html>
          <head>
                    <title>Show and Hidden</title>
          </head>
                    <body>
                    </body>
</html>

then under the title you enter the bootstrap link, so that when you press the bootstrap button the button will change color.

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

then in you enter the syntax as below

<body>
    <center><br><br><br><br><br><br><br><br><br><br>
        <button id="show" class="btn btn-success">Show</button>
        <button id="hidden" class="btn btn-danger">Hiden</button>
        <br><br>
        <p id="content">if you hit show then he will show and if you press hidden then he will be hidden</p>
        <script>
            $(document).ready(function(){
                $("#show").click(function(){
                    $("#content").toggle();
                });
            });
        </script>
        <script>
            $(document).ready(function(){
                $("#hidden").click(function(){
                    $("#content").toggle();
                });
            });
        </script>
    </center>
</body>

for the

to make the writing or buttons in the middle of the screen and
to make the button or writing further down.

<center> <br><br><br><br><br><br><br><br><br><br> </center>

then this is the syntax for creating the show button and the hidden button.

             <button id="show" class="btn btn-success">Show</button>
             <button id="hidden" class="btn btn-danger">Hiden</button>

then if you want to create a paragraph. you should add this syntax.

      <p id="content">if you hit show then he will show and if you press hidden then he will be hidden</p>

and this is the syntax of the show button, which serves to display the image or writing that we have created.

<script>
            $(document).ready(function(){
                $("#show").click(function(){
                    $("#content").toggle();
                });
            });
</script>

and then this is the syntax of the hidden button, which serves to hide the image or writing we have created.

    <script>
            $(document).ready(function(){
                $("#hidden").click(function(){
                    $("#content").toggle();
                });
            });
</script>

after all is done, we save it in C: \ xampp \ htdocs and give the file name hidden.html. then will appear as below picture.

and if you press the hidden key then the posts below will be hidden.

Posted on Utopian.io - Rewarding Open Source Contributors