Cara Menampilkan Teks dengan Menekan Tombol Menu

Jika kita bicara soal menu, yang terbayangkan di benak kita adalah sebuah tampilan kotak dimana ketika kita menghover atau mengkliknya akan muncul menu-menu lainya, atau biasa disebut sub menu, tetapi di sini akan saya buat berbeda di mana saya akan memberikan cara menampilkan teks dengan menekan tombol menu, jadi tidak sub menu lagi yang tampil tetapi teks yang akan tampil, seperti apa.! simak terus ya teman-teman.

Oke masih seputar even ya teman-teman, jika kita kemarin sudah membuat tombol read more tidak jauh berbeda dengan yang kemarin ya,  tapi disini saya menggunakan menu ya, oke langsung saja kita masuk contohnya cara menampilkan teks dengan menekan tombol menu  mungkin jika teman sudah mengikuti artikel sebelumnya pasti sudah paham ya, oke silahkan teman-teman lihat di bawah ini:

<html>
  <head>
    <title>Cara Menampilkan Teks dengan Menekan Tombol Menu</title>
	<style type="text/css">
  .tombol{
    width: 100px;
    float: left;
    text-align: center;
    color:#fff;
    background-color:red;
    margin: 5px;
    font-weight: bold;
    cursor: pointer;
  }
  .container{
    width: 800px;
    margin: auto;
    text-align: justify;
    border: 2px dotted pink;
    padding: 10px;
    border-radius: 10px;
  }

    </style>
	
  </head>
  <body>
    <div class="container">
      <span class="tombol" id="tombol_html"> HTML </span>
      <span class="tombol" id="tombol_css"> CSS </span>
      <span class="tombol" id="tombol_javascript"> Javascript </span>
      <span class="tombol" id="tombol_jquery"> JQuery </span>
      <br>
      <br>
        <p class="html">HTML: Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.</p>
    	
        <p class="css">CSS: Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

        Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.[1].</p>
    	
        <p class="javascript">Javascript: adalah bahasa pemrograman tingkat tinggi dan dinamis.[4] JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.</p>

        <p class="jquery">Jquery: adalah bahasa pemrograman tingkat tinggi dan dinamis.[4] JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.</p>
        <p style="color: magenta">NB: Sumber Pengertian Dari https://id.wikipedia.org</p>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $(".html").hide();
        $(".css").hide();
        $(".jquery").hide();
        $(".javascript").hide();

        $("#tombol_html").click(function(){
          $(".html").slideDown("slow");
          $(".css").hide();
          $(".javascript").hide();
          $(".jquery").hide();
        })

        $("#tombol_css").click(function(){
          $(".html").hide();
          $(".css").slideDown("slow");
          $(".javascript").hide();
          $(".jquery").hide();
        })

        $("#tombol_javascript").click(function(){
          $(".html").hide();
          $(".jquery").hide();
          $(".css").hide();
          $(".javascript").show("show");
        })

        $("#tombol_jquery").click(function(){
          $(".jquery").slideDown("slow");
          $(".css").hide();
          $(".javascript").hide();
          $(".html").hide();
        })
          
      })
    </script>
  </div>
  </body>
</html>

Nah cukup panjang ya, itu juga mungkin karena ada artikel ya di dalamnya, oke langsung saja kita lihat hasil sebelum dan sesudahnya ya:

yang di atas gambar sebelum ya, dan ini sesudahnya:

Oke sudah paham ya, dan saya rasa sampai disini dulu belajar kita tentang cara menampilkan teks dengan menekan tombol menu, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.