Membuat Single Dan Multiple Read More Read Less Button Dengan Javascript

Daftar Isi Konten

Sobat jagoan. Bagi kalian yang sedang dalam sebuah project ataupun tugas kuliah. Atau mungkin sedang dalam belajar html CSS dan javascript. Mungkin yang pertama kali terbayang dibenak kalian bagaimana cara membuat tombol. Yang ketika ditekan tombol tersebut bisa menyingkat ataupun menyembunyikan sebagian teks. Dan apabila ditekan lagi maka teks yang asli bisa ditampilkan semua.

Nah untuk memudahkan kita dalam memanipulasi html ini kita membutuhkan sedikit bantuan yaitu javascript. Kalau kalian sedang belajar pembuatan website. Admin sangat rekomendasikan kepada teman teman sekalian untuk belajar dasarnya di w3 school. Implementasi mengenai dasar dasar koding javascript. Sangat bisa kita pelajari mudah disana. Sebab website tersebut menyediakan langsung. Contoh kasus yang sedang kalian cari. Atau solusi bagi yang kesulitan mengembangkan kode kode program.

Dikesempatan kali ini. Sebagai contoh admin hanya akan paparkan saja langsung ketiga bahasa html CSS dan javascript. Kedalam satu file index saja. Sebab ini hanya sebagai contoh. Karena tak perlu rasanya menggunakan XAMPP atau Apache untuk keperluan mengetes script ini. Namun jangan takut. Kode ini bisa admin jamin 100% work. Dan strukturnya tetap HTML 5 Karena sudah admin tes sendiri. Kalau kalian sedang mengembangkan website. Bisa kalian letak CSS pada folder assets dan style. Lalu javascript di dalam folder yang kalian inginkan.

Oke untuk penerapan kodenya mari simak langkahnya berikut ini.

Single read more readless button dengan javascript.

Nah agar tulisan yang panjang bisa dengan mudah kita singkat dan simpan nilainya pada button atau tombol read more. Maka terlebih dahulu kita buat kerangka html nya sebagai berikut.Disini Admin akan membuat kerangka struktur HTML 5

Kode lengkapnya menjadi seperti ini

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#selengkapnya {display: none;}
</style>
</head>
<body>

<h2>Contoh Baca More Baca Less Button Dengan Javascript Jagoan Kode</h2>
<p>New Balance began as a Boston-based arch support company in the early 1900&#39;s, developed <span id="jagoankodeblog">...</span><span id="selengkapnya">into a specialized shoe manufacturer in the 1970&#39;s, and has grown to 
become a leading global athletic products company. Today New Balance is a family of brands including New Balance, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the 
days of selling arch supports to police officers and waiters, New Balance has been a brand concerned with meeting the needs of the everyday athlete. Part of producing superior
 footwear and athletic apparel is manufacturingNew Balance began as a Boston-based arch support company in the early 1900&#39;s, developed into a specialized shoe manufacturer 
 in the 1970&#39;s, and has grown to become a leading global athletic products company. Today New Balance is a family of brands including New Balance, Dunham, PF Flyers, Aravon, 
 Warrior and Brine. Since the days of selling arch supports to police officers and waiters, New Balance has been a brand concerned with meeting the needs of the everyday athlete. 
 Part of producing superior footwear and athletic apparel is manufacturingNew Balance began as a Boston-based arch support company in the early 1900&#39;s, developed into a 
 specialized shoe manufacturer in the 1970&#39;s, and has grown to become a leading global athletic products company. Today New Balance is a family of brands including New Balance
 , Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling arch supports to police officers and waiters, New Balance has been a brand concerned with meeting the 
 needs of the everyday athlete. Part of producing superior footwear and athletic apparel is manufacturingNew Balance began as a Boston-based arch support company in the early 
 1900&#39;s, developed into a specialized shoe manufacturer in the 1970&#39;s, and has grown to become a leading global athletic products company. Today New Balance is a family o
 f brands including New Balance, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling arch supports to police officers and waiters, New Balance has been a brand
 concerned with meeting the needs of the everyday athlete. Part of producing superior footwear and athletic apparel is manufacturingNew Balance began as a Boston-based arch support
 company in the early 1900&#39;s, developed into a specialized shoe manufacturer in the 1970&#39;s, and has grown to become a leading global athletic products company. Today New 
 Balance is a family of brands including New Balance, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling arch supports to police officers and waiters, New 
 Balance has been a brand concerned with meeting the needs of the everyday athlete. Part of producing superior footwear and athletic apparel is manufacturing</span></p>
<button onclick="JagoankodeStedy()" id="myjagoankode">Baca selengkapnya</button>

<script>
function JagoankodeStedy() {
  var jagoankodeblog = document.getElementById("jagoankodeblog");
  var selengkapnyaText = document.getElementById("selengkapnya");
  var jagoankodecool = document.getElementById("myjagoankode");

  if (jagoankodeblog.style.display === "none") {
    jagoankodeblog.style.display = "inline";
    jagoankodecool.innerHTML = "Baca selengkapnya"; 
    selengkapnyaText.style.display = "none";
  } else {
    jagoankodeblog.style.display = "none";
    jagoankodecool.innerHTML = "Sembunyikan"; 
    selengkapnyaText.style.display = "inline";
  }
}
</script>

</body>
</html>

Silahkan simpan beri nama file index.html

Maka hasil akhirnya akan menjadi seperti ini.

Oke diatas kita telah berhasil membuat read more dan readless namun itu akan hanya berhasil jika konten yang kalian singkat hanya berjumlah satu. Bagaimana jika ada 2 3 atau lebih pasti sangat membingungkan. Maka dari itu kita akan melanjutkan tutorial untuk yang multiple read more dan readlessnya. Cekidot.

Multiple readmore read less button pure javascript.

Oke sekarang silahkan tulis kodenya seperti dibawah ini

HTML

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ini rirle</title>
   <style>
   <!-- <p> masukan CSS Sementara Disini </p> -->
   </style>
</head>
<body>
  <header>
         <nav>
             <ul>
                 <li><a class="active" href="#home">Home</a></li>
             </ul>
         </nav>
     </header>
     
     <main>

<article>
<div class="kode-jagoan" jagoan-kode="fila">
<h2>Fila Oakmont TR Athletic Shoe </h2>
<p>Hit the streets with the retro hiker style of the new Oakmont TR Athletic Shoe from Fila! This hiking-inspired sneaker features durable leather and mesh uppers in a vibrant throwback colorway, round laces and D-ring eyelets, and durable rubber outsole <span class="jagoankodekeren">...</span><span class="more" style="display: none;"> with mountain-themed tread design for flexible traction. Available online at Journeys.com! Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda berada.</p>
<button onclick="readMore('fila')" class="jagoankodemantap">Read more</button>
</div>
</article>

<article>
<div class="kode-jagoan" jagoan-kode="vans">
<h2>Vans Old Skool Garden Floral Skate </h2>
<p>VansÂ® is the original action sports footwear and apparel brand. Since day one, VansÂ® has celebrated the lifestyle and creative self-expression of musicians, artists, and athletes on boards and bikes all around the world. From timeless footwear,<span class="jagoankodekeren">...</span><span class="more" style="display: none;"> apparel, accessories, and snowboard boots, to progressive events like the Vans Warped TourÂ® and surfingâ€™s most prestigious contest, the Vans US Open of SurfingÂ®, VansÂ® continues to support todayâ€™s innovators and those who live â€œOff the Wallâ€.Add some flower power to your classic skate look with the new Old Skool Garden Floral Skate Shoe from Vans! The Old Skool Garden Floral Skate Shoe showcases a sturdy suede and floral print canvas upper with signature side stripes, and classic vulcanized sole construction for flexible grip and traction</p>
<button onclick="readMore('vans')" class="jagoankodemantap">Read more</button>
</div>
</article>

<article>
<div class="kode-jagoan" jagoan-kode="converse">
<h2>Converse Chuck Taylor All Star Hi Sneaker</h2>
<p>Get your groove back with the new Chuck Taylor All Star Hi Tie Dye Sneaker from Converse! These vivid high-top Chucks feature breathable canvas uppers with psychedelic tie dye patterns, signature rubber cap toe, and flexible rubber outsole for traction<span class="jagoankodekeren">...</span><span class="more" style="display: none;">. Available exclusively at Journeys!In some ways, you know us. Converse has been making Chuck Taylor All Star and One Star sneakers since we started over a century ago, and now we work to make new street style classics. What you wear defines sport, street, and creative culture, and we have been redefining it with you all along.</p>
<button onclick="readMore('converse')" class="jagoankodemantap">Read more</button>
</div>
</article>

<article>
<div class="kode-jagoan" jagoan-kode="adidasek">
<h2>Mens adidas Swift Run RF Athletic Shoe</h2>
<p>Make your gym-ready mindset an everyday occurrence with the new Swift Run RF Athletic Shoe from adidas! Borrowing workout style for your daily grind, this sleek sneaker features breathable mesh upper with signature side stripes and lightweight EVA <span class="jagoankodekeren">...</span><span class="more" style="display: none;">midsole for premium shock absorption and support.For over 80 years, adidas has been part of the world of athletic and fashion shoes, delivering state-of-the-art casual, athletic and running footwear. Their innovative designs elevate the performance of athletes and casual wearers alike by creating shoes that work with the foot, not against it, to help you reach your highest level of performance and comfort. Journeys adidas collections include: NMD, Superstar, Adilette Slides, Tubular Shadow, Alphabounce, Gazelle, Stan Smith, and many more!</p>
<button onclick="readMore('adidasek')" class="jagoankodemantap">Read more</button>
</div>
</article>

<article>
<div class="kode-jagoan" jagoan-kode="newbalancek">
<h2>Mens New Balance 574 Summer Mesh</h2>
<p>We have maintained five manufacturing facilities in New England where we continue to rely on the skills and teamwork of our American workforce to produce a percentage of our athletic footwear. We have also remained strongly committed to a core set <span class="jagoankodekeren">...</span><span class="more" style="display: none;"> of company values that include integrity, teamwork and total customer satisfaction..We have maintained five manufacturing facilities in New England where we continue to rely on the skills and teamwork of our American workforce to produce a percentage of our athletic footwear. We have also remained strongly committed to a core set of company values that include integrity, teamwork and total customer satisfaction..</p>
<button onclick="readMore('newbalancek')" class="jagoankodemantap">Read more</button>
</div>

<section>
<div class="kode-jagoan" jagoan-kode="newbalancek1">
<h3>New Balance 574 Summer Mesh Athletic</h3>
<p>New Balance began as a Boston-based arch support company in the early 1900&#39;s, developed into a specialized shoe manufacturer in the 1970&#39;s, and has grown to become a leading global athletic products company. Today New Balance is a family of brands<span class="jagoankodekeren">...</span><span class="more" style="display: none;"> including New Balance, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling arch supports to police officers and waiters, New Balance has been a brand concerned with meeting the needs of the everyday athlete. Part of producing superior footwear and athletic apparel is manufacturing it to fit all widths and sizes, because a better fit produces better performance. To ensure the best fitting, best performing shoes and apparel, we focus on improving our technology and production methods</p>
<button onclick="readMore('newbalancek1')" class="jagoankodemantap">Read more</button>
</div>
</section>

<section>
<div class="kode-jagoan" jagoan-kode="newbalancek2">
<h3>New Balance 574 Split Sail Athletic Shoe</h3>
<p>New Balance began as a Boston-based arch support company in the early 1900&#39;s, developed into a specialized shoe manufacturer in the 1970&#39;s, and has grown to become a leading global athletic products company. Today New Balance is a family of brands including <span class="jagoankodekeren">...</span><span class="more" style="display: none;"> New Balance, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling arch supports to police officers and waiters, New Balance has been a brand concerned with meeting the needs of the everyday athlete. Part of producing superior footwear and athletic apparel is manufacturing it to fit all widths and sizes, because a better fit produces better performance</p>
<button onclick="readMore('newbalancek2')" class="jagoankodemantap">Read more</button>
</div>
</section>
</article>

<aside>
    </aside>

  </main>

<footer>
       <p>ini footer</p>
</footer>
     <script>
  <!-- <p> masukan Javascript Sementara Disini </p> -->
    </script>
</body>
</html>

CSS

#more : display:none;

Javascript.

function readMore(jagoankodeganteng) {
    let jagoankodekeren = document.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .jagoankodekeren`);
    let moreText = document.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .more`);
    let btnText = document.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .jagoankodemantap`);

    if (jagoankodekeren.style.display === "none") {
        jagoankodekeren.style.display = "inline";
        btnText.textContent = "Read more";
        moreText.style.display = "none";
    } else {
        jagoankodekeren.style.display = "none";
        btnText.textContent = "Read less";
        moreText.style.display = "inline";
    }
}

Kode lengkapnya menjadi seperti ini :

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ini rirle</title>
   <style>
   #more : display:none;
   </style>
</head>
<body>
  <header>
    
         <nav>
             <ul>
                 <li><a class="active" href="#home">Home</a></li>
             </ul>
         </nav>
     </header>
     
     <main>


<article>
<div class="kode-jagoan" jagoan-kode="fila">
<h2>Fila Oakmont TR Athletic Shoe </h2>
<p>Hit the streets with the retro hiker style of the new Oakmont TR Athletic Shoe from Fila! This hiking-inspired sneaker features durable leather and mesh uppers in a vibrant throwback colorway, round laces and D-ring eyelets, and durable rubber outsole <span class="jagoankodekeren">...</span><span class="more" style="display: none;"> with mountain-themed tread design for flexible traction. Available online at Journeys.com! Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat Nga-Bandung-an Banda Indung, yang merupakan kalimat sakral dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang berada di alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup maupun benda mati. Sinonim dari banda adalah harta. Indung berarti Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda berada.</p>
<button onclick="readMore('fila')" class="jagoankodemantap">Read more</button>
</div>
</article>

<article>
<div class="kode-jagoan" jagoan-kode="vans">
<h2>Vans Old Skool Garden Floral Skate </h2>
<p>VansÂ® is the original action sports footwear and apparel brand. Since day one, VansÂ® has celebrated the lifestyle and creative self-expression of musicians, artists, and athletes on boards and bikes all around the world. From timeless footwear,<span class="jagoankodekeren">...</span><span class="more" style="display: none;"> apparel, accessories, and snowboard boots, to progressive events like the Vans Warped TourÂ® and surfingâ€™s most prestigious contest, the Vans US Open of SurfingÂ®, VansÂ® continues to support todayâ€™s innovators and those who live â€œOff the Wallâ€.Add some flower power to your classic skate look with the new Old Skool Garden Floral Skate Shoe from Vans! The Old Skool Garden Floral Skate Shoe showcases a sturdy suede and floral print canvas upper with signature side stripes, and classic vulcanized sole construction for flexible grip and traction</p>
<button onclick="readMore('vans')" class="jagoankodemantap">Read more</button>
</div>
</article>

<article>
<div class="kode-jagoan" jagoan-kode="converse">
<h2>Converse Chuck Taylor All Star Hi Sneaker</h2>
<p>Get your groove back with the new Chuck Taylor All Star Hi Tie Dye Sneaker from Converse! These vivid high-top Chucks feature breathable canvas uppers with psychedelic tie dye patterns, signature rubber cap toe, and flexible rubber outsole for traction<span class="jagoankodekeren">...</span><span class="more" style="display: none;">. Available exclusively at Journeys!In some ways, you know us. Converse has been making Chuck Taylor All Star and One Star sneakers since we started over a century ago, and now we work to make new street style classics. What you wear defines sport, street, and creative culture, and we have been redefining it with you all along.</p>
<button onclick="readMore('converse')" class="jagoankodemantap">Read more</button>
</div>
</article>

<article>
<div class="kode-jagoan" jagoan-kode="adidasek">
<h2>Mens adidas Swift Run RF Athletic Shoe</h2>
<p>Make your gym-ready mindset an everyday occurrence with the new Swift Run RF Athletic Shoe from adidas! Borrowing workout style for your daily grind, this sleek sneaker features breathable mesh upper with signature side stripes and lightweight EVA <span class="jagoankodekeren">...</span><span class="more" style="display: none;">midsole for premium shock absorption and support.For over 80 years, adidas has been part of the world of athletic and fashion shoes, delivering state-of-the-art casual, athletic and running footwear. Their innovative designs elevate the performance of athletes and casual wearers alike by creating shoes that work with the foot, not against it, to help you reach your highest level of performance and comfort. Journeys adidas collections include: NMD, Superstar, Adilette Slides, Tubular Shadow, Alphabounce, Gazelle, Stan Smith, and many more!</p>
<button onclick="readMore('adidasek')" class="jagoankodemantap">Read more</button>
</div>
</article>

<article>
<div class="kode-jagoan" jagoan-kode="newbalancek">
<h2>Mens New Balance 574 Summer Mesh</h2>
<p>We have maintained five manufacturing facilities in New England where we continue to rely on the skills and teamwork of our American workforce to produce a percentage of our athletic footwear. We have also remained strongly committed to a core set <span class="jagoankodekeren">...</span><span class="more" style="display: none;"> of company values that include integrity, teamwork and total customer satisfaction..We have maintained five manufacturing facilities in New England where we continue to rely on the skills and teamwork of our American workforce to produce a percentage of our athletic footwear. We have also remained strongly committed to a core set of company values that include integrity, teamwork and total customer satisfaction..</p>
<button onclick="readMore('newbalancek')" class="jagoankodemantap">Read more</button>
</div>

<section>
<div class="kode-jagoan" jagoan-kode="newbalancek1">
<h3>New Balance 574 Summer Mesh Athletic</h3>
<p>New Balance began as a Boston-based arch support company in the early 1900&#39;s, developed into a specialized shoe manufacturer in the 1970&#39;s, and has grown to become a leading global athletic products company. Today New Balance is a family of brands<span class="jagoankodekeren">...</span><span class="more" style="display: none;"> including New Balance, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling arch supports to police officers and waiters, New Balance has been a brand concerned with meeting the needs of the everyday athlete. Part of producing superior footwear and athletic apparel is manufacturing it to fit all widths and sizes, because a better fit produces better performance. To ensure the best fitting, best performing shoes and apparel, we focus on improving our technology and production methods</p>
<button onclick="readMore('newbalancek1')" class="jagoankodemantap">Read more</button>
</div>
</section>

<section>
<div class="kode-jagoan" jagoan-kode="newbalancek2">
<h3>New Balance 574 Split Sail Athletic Shoe</h3>
<p>New Balance began as a Boston-based arch support company in the early 1900&#39;s, developed into a specialized shoe manufacturer in the 1970&#39;s, and has grown to become a leading global athletic products company. Today New Balance is a family of brands including <span class="jagoankodekeren">...</span><span class="more" style="display: none;"> New Balance, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling arch supports to police officers and waiters, New Balance has been a brand concerned with meeting the needs of the everyday athlete. Part of producing superior footwear and athletic apparel is manufacturing it to fit all widths and sizes, because a better fit produces better performance</p>
<button onclick="readMore('newbalancek2')" class="jagoankodemantap">Read more</button>
</div>
</section>
</article>


<aside>
    </aside>

  </main>

<footer>
       <p>ini footer</p>
</footer>
     <script>
  <!-- <p> masukan Javascript Sementara Disini </p> -->
   function readMore(jagoankodeganteng) {
    let jagoankodekeren = document.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .jagoankodekeren`);
    let moreText = document.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .more`);
    let btnText = document.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .jagoankodemantap`);

    if (jagoankodekeren.style.display === "none") {
        jagoankodekeren.style.display = "inline";
        btnText.textContent = "Read more";
        moreText.style.display = "none";
    } else {
        jagoankodekeren.style.display = "none";
        btnText.textContent = "Read less";
        moreText.style.display = "inline";
    }
}
    </script>
</body>
</html>

Sipp sekarang simpan dengan nama file index.html lalu jalankan dibrowser.

Saat salah satu tombol ditekan. Maka tombol read more yang lain tidak akan terganggu. Karena kita telah mengimplementasikan. Kode dan script nya dengan benar.