What Will I Learn?
<ul>
<li>You will learn you will learn about programming languages
<li>You will learn you will learn how to create a show button
<li>You will learn you will learn how to create a hidden button
<h4>Requirements
<ul>
<li>You must have basic programming language
<li>You must have basic about HTML
<li>You should have basic about bootstrap
<h4>Difficulty
<ul>
<li>Basic
<h4>Tutorial Contents
<p dir="auto">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.
<pre><code> <html>
<head>
<title>Show and Hidden</title>
</head>
<body>
</body>
</html>
<p dir="auto">then under the title you enter the bootstrap link, so that when you press the bootstrap button the button will change color.
<pre><code> <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>
<p dir="auto">then in you enter the syntax as below
<pre><code><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>
<p dir="auto">for the <center> to make the writing or buttons in the middle of the screen and <br /> to make the button or writing further down.
<pre><code><center> <br><br><br><br><br><br><br><br><br><br> </center>
<p dir="auto">then this is the syntax for creating the show button and the hidden button.
<pre><code> <button id="show" class="btn btn-success">Show</button>
<button id="hidden" class="btn btn-danger">Hiden</button>
<p dir="auto">then if you want to create a paragraph. you should add this syntax.
<pre><code> <p id="content">if you hit show then he will show and if you press hidden then he will be hidden</p>
<p dir="auto">and this is the syntax of the show button, which serves to display the image or writing that we have created.
<pre><code><script>
$(document).ready(function(){
$("#show").click(function(){
$("#content").toggle();
});
});
</script>
<p dir="auto">and then this is the syntax of the hidden button, which serves to hide the image or writing we have created.
<pre><code> <script>
$(document).ready(function(){
$("#hidden").click(function(){
$("#content").toggle();
});
});
</script>
<p dir="auto">after all is done, we save it in C: \ xampp \ htdocs and give the file name hidden.html. then will appear as below picture.
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517337098/whnfqwk6lgusqyt44iji.jpg" alt="show.jpg" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517337098/whnfqwk6lgusqyt44iji.jpg 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517337098/whnfqwk6lgusqyt44iji.jpg 2x" />
<p dir="auto">and if you press the hidden key then the posts below will be hidden.
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517337242/i0gp9hkksalyuowiteyp.jpg" alt="hidden.jpg" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517337242/i0gp9hkksalyuowiteyp.jpg 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517337242/i0gp9hkksalyuowiteyp.jpg 2x" />
<p dir="auto"><br /><hr /><em>Posted on <a href="https://utopian.io/utopian-io/@ramarinaldi/using-bootstrap-can-make-show-button-and-hidden-button" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Utopian.io - Rewarding Open Source Contributors<hr /><p>
Your contribution cannot be approved because it does not follow the Utopian Rules.
Your tutorial is not very informative, you use both English and Indonesian in the same tutorial and it is very similar to a post already shared to Utopian.io, which can be found here.
You can contact us on Discord.
[utopian-moderator]
voteback!!!