How to Make Read More Html Code
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% piece of work. Dan strukturnya tetap HTML v Karena sudah admin tes sendiri. Kalau kalian sedang mengembangkan website. Bisa kalian letak CSS pada binder avails dan style. Lalu javascript di dalam folder yang kalian inginkan.
Oke untuk penerapan kodenya mari simak langkahnya berikut ini.
Single read more readless push button dengan javascript.
Nah agar tulisan yang panjang bisa dengan mudah kita singkat dan simpan nilainya pada button atau tombol read more than. Maka terlebih dahulu kita buat kerangka html nya sebagai berikut.Disini Admin akan membuat kerangka struktur HTML 5
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=ane"> <style> <!-- <p> masukan CSS Sementara Disini </p> --> </style> </caput> <body> <h2>Contoh Baca More Baca Less Button Dengan Javascript Jagoan Kode</h2> <p>New Balance began equally a Boston-based arch back up company in the early 1900'south, developed <span id="jagoankodeblog">...</span><span id="selengkapnya">into a specialized shoe manufacturer in the 1970's, and has grown to go a leading global athletic products company. Today New Rest is a family of brands including New Balance, Dunham, PF Flyers, Aravon, Warrior and Alkali. 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 Remainder began every bit a Boston-based curvation support visitor in the early 1900'due south, developed into a specialized shoe manufacturer in the 1970'southward, and has grown to become a leading global athletic products company. Today New Balance is a family of brands including New Residual, Dunham, PF Flyers, Aravon, Warrior and Alkali. Since the days of selling arch supports to constabulary officers and waiters, New Residuum has been a make concerned with meeting the needs of the everyday athlete. Office of producing superior footwear and athletic apparel is manufacturingNew Balance began as a Boston-based arch support visitor in the early 1900's, developed into a specialized shoe manufacturer in the 1970'south, and has grown to become a leading global athletic products visitor. Today New Residue is a family of brands including New Balance , Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling curvation supports to police officers and waiters, New Residuum has been a brand concerned with coming together the needs of the everyday athlete. Part of producing superior footwear and athletic apparel is manufacturingNew Balance began every bit a Boston-based arch back up company in the early on 1900's, developed into a specialized shoe manufacturer in the 1970'due south, and has grown to go a leading global able-bodied products company. Today New Residuum 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 force officers and waiters, New Residual has been a brand concerned with meeting the needs of the everyday athlete. Part of producing superior footwear and athletic wearing apparel is manufacturingNew Residuum began as a Boston-based arch support company in the early 1900's, developed into a specialized shoe manufacturer in the 1970'south, and has grown to become a leading global athletic products company. Today New Balance is a family unit of brands including New Residual, 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</bridge></p> <push onclick="JagoankodeStedy()" id="myjagoankode">Baca selengkapnya</button> <script> <!-- <p> masukan Javascript Sementara Disini </p> --> </script> </body> </html> Tampak pada code html diatas. Terdapat. Itulah batas untuk paragraf atau kalimat yang akan kita potong dan sembunyikan di tombol read more than.
CSS
#selengkapnya {display: none;} Lalu kita tambahkan
javascript
function JagoankodeStedy() { var jagoankodeblog = certificate.getElementById("jagoankodeblog"); var selengkapnyaText = document.getElementById("selengkapnya"); var jagoankodecool = certificate.getElementById("myjagoankode"); if (jagoankodeblog.style.display === "none") { jagoankodeblog.mode.brandish = "inline"; jagoankodecool.innerHTML = "Baca selengkapnya"; selengkapnyaText.style.display = "none"; } else { jagoankodeblog.manner.display = "none"; jagoankodecool.innerHTML = "Sembunyikan"; selengkapnyaText.way.brandish = "inline"; } } 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's, adult <span id="jagoankodeblog">...</span><span id="selengkapnya">into a specialized shoe manufacturer in the 1970'southward, and has grown to become a leading global athletic products company. Today New Balance is a family of brands including New Remainder, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling curvation supports to police officers and waiters, New Residuum has been a brand concerned with coming together 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's, developed into a specialized shoe manufacturer in the 1970'south, and has grown to go a leading global athletic products company. Today New Residual is a family of brands including New Residue, Dunham, PF Flyers, Aravon, Warrior and Alkali. Since the days of selling arch supports to police officers and waiters, New Residue has been a brand concerned with meeting the needs of the everyday athlete. Role of producing superior footwear and athletic dress is manufacturingNew Remainder began equally a Boston-based arch support visitor in the early 1900's, developed into a specialized shoe manufacturer in the 1970's, and has grown to become a leading global able-bodied products company. Today New Balance is a family unit of brands including New Rest , Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling arch supports to police officers and waiters, New Rest has been a make concerned with meeting the needs of the everyday athlete. Part of producing superior footwear and athletic dress is manufacturingNew Residual began as a Boston-based curvation support visitor in the early 1900'south, developed into a specialized shoe manufacturer in the 1970'due south, and has grown to go a leading global able-bodied products company. Today New Balance is a family o f brands including New Balance, Dunham, PF Flyers, Aravon, Warrior and Alkali. Since the days of selling arch supports to police force officers and waiters, New Balance has been a make concerned with coming together the needs of the everyday athlete. Office of producing superior footwear and athletic wearing apparel is manufacturingNew Rest began as a Boston-based arch support company in the early 1900'due south, developed into a specialized shoe manufacturer in the 1970's, and has grown to go a leading global able-bodied products company. Today New Residue is a family of brands including New Residue, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling curvation supports to police officers and waiters, New Residuum has been a brand concerned with meeting the needs of the everyday athlete. Part of producing superior footwear and athletic clothes is manufacturing</span></p> <button onclick="JagoankodeStedy()" id="myjagoankode">Baca selengkapnya</push button> <script> function JagoankodeStedy() { var jagoankodeblog = document.getElementById("jagoankodeblog"); var selengkapnyaText = document.getElementById("selengkapnya"); var jagoankodecool = certificate.getElementById("myjagoankode"); if (jagoankodeblog.style.display === "none") { jagoankodeblog.style.display = "inline"; jagoankodecool.innerHTML = "Baca selengkapnya"; selengkapnyaText.style.brandish = "none"; } else { jagoankodeblog.manner.display = "none"; jagoankodecool.innerHTML = "Sembunyikan"; selengkapnyaText.style.display = "inline"; } } </script> </trunk> </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 two 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 push pure javascript.
Oke sekarang silahkan tulis kodenya seperti dibawah ini
HTML
<!DOCTYPE html> <html> <head> <meta proper name="viewport" content="width=device-width, initial-scale=1.0"> <title>ini rirle</championship> <fashion> <!-- <p> masukan CSS Sementara Disini </p> --> </manner> </head> <body> <header> <nav> <ul> <li><a course="active" href="#domicile">Dwelling</a></li> </ul> </nav> </header> <primary> <article> <div class="kode-jagoan" jagoan-kode="fila"> <h2>Fila Oakmont TR Athletic Shoe </h2> <p>Hitting the streets with the retro hiker mode of the new Oakmont TR Athletic Shoe from Fila! This hiking-inspired sneaker features durable leather and mesh uppers in a vibrant throwback colorway, circular laces and D-band eyelets, and durable rubber outsole <span form="jagoankodekeren">...</span><span class="more" style="display: none;"> with mountain-themed tread design for flexible traction. Bachelor 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> </commodity> <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 mean solar day 1, Vans® has celebrated the lifestyle and artistic self-expression of musicians, artists, and athletes on boards and bikes all around the globe. From timeless footwear,<span course="jagoankodekeren">...</bridge><span class="more than" style="display: none;"> dress, accessories, and snowboard boots, to progressive events similar the Vans Warped Tour® and surfing's almost prestigious contest, the Vans United states of america Open up of Surfing®, Vans® continues to support today'south innovators and those who alive "Off the Wall".Add some flower power to your classic skate look with the new Old Skool Garden Floral Skate Shoe from Vans! The Former Skool Garden Floral Skate Shoe showcases a sturdy suede and floral print canvas upper with signature side stripes, and classic vulcanized sole structure for flexible grip and traction</p> <button onclick="readMore('vans')" grade="jagoankodemantap">Read more</button> </div> </article> <commodity> <div class="kode-jagoan" jagoan-kode="converse"> <h2>Converse Chuck Taylor All Star Hi Sneaker</h2> <p>Get your groove dorsum with the new Chuck Taylor All Star Hi Tie Dye Sneaker from Converse! These bright high-superlative Chucks characteristic breathable canvas uppers with psychedelic tie dye patterns, signature safe cap toe, and flexible rubber outsole for traction<span form="jagoankodekeren">...</span><bridge class="more than" style="display: none;">. Available exclusively at Journeys!In some means, yous know us. Converse has been making Chuck Taylor All Star and One Star sneakers since nosotros started over a century ago, and now nosotros work to make new street fashion classics. What yous wear defines sport, street, and artistic culture, and we have been redefining it with you all along.</p> <push button onclick="readMore('converse')" class="jagoankodemantap">Read more</push> </div> </article> <article> <div form="kode-jagoan" jagoan-kode="adidasek"> <h2>Mens adidas Swift Run RF Athletic Shoe</h2> <p>Brand 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 <bridge course="jagoankodekeren">...</span><span class="more" style="display: none;">midsole for premium stupor absorption and back up.For over 80 years, adidas has been part of the world of athletic and fashion shoes, delivering state-of-the-fine art casual, able-bodied and running footwear. Their innovative designs drag the performance of athletes and coincidental wearers alike by creating shoes that piece of work with the foot, not against information technology, to help you lot 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 than!</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 Summertime Mesh</h2> <p>We take maintained five manufacturing facilities in New England where we go along to rely on the skills and teamwork of our American workforce to produce a percent of our able-bodied footwear. Nosotros have too remained strongly committed to a cadre fix <span class="jagoankodekeren">...</span><span class="more than" style="display: none;"> of company values that include integrity, teamwork and full customer satisfaction..We have maintained 5 manufacturing facilities in New England where we keep to rely on the skills and teamwork of our American workforce to produce a percentage of our athletic footwear. We have likewise remained strongly committed to a core gear up of company values that include integrity, teamwork and total customer satisfaction..</p> <button onclick="readMore('newbalancek')" course="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 curvation support visitor in the early on 1900's, developed into a specialized shoe manufacturer in the 1970's, and has grown to become a leading global athletic products company. Today New Residuum is a family of brands<span class="jagoankodekeren">...</span><span form="more" style="display: none;"> including New Balance, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling arch supports to law officers and waiters, New Balance has been a brand concerned with coming together the needs of the everyday athlete. Part of producing superior footwear and able-bodied apparel is manufacturing information technology to fit all widths and sizes, because a ameliorate fit produces better performance. To ensure the all-time plumbing equipment, all-time performing shoes and wearing apparel, we focus on improving our technology and production methods</p> <button onclick="readMore('newbalancek1')" course="jagoankodemantap">Read more</button> </div> </department> <section> <div course="kode-jagoan" jagoan-kode="newbalancek2"> <h3>New Rest 574 Split Sail Athletic Shoe</h3> <p>New Balance began as a Boston-based arch support company in the early 1900'due south, developed into a specialized shoe manufacturer in the 1970's, and has grown to become a leading global able-bodied products company. Today New Rest is a family of brands including <span grade="jagoankodekeren">...</span><span class="more than" manner="display: none;"> New Residue, Dunham, PF Flyers, Aravon, Warrior and Alkali. Since the days of selling arch supports to police officers and waiters, New Balance has been a make concerned with coming together the needs of the everyday athlete. Role of producing superior footwear and athletic apparel is manufacturing it to fit all widths and sizes, because a amend fit produces better operation</p> <button onclick="readMore('newbalancek2')" form="jagoankodemantap">Read more</push button> </div> </section> </article> <aside> </aside> </main> <footer> <p>ini footer</p> </footer> <script> <!-- <p> masukan Javascript Sementara Disini </p> --> </script> </torso> </html> CSS
#more : display:none; Javascript.
function readMore(jagoankodeganteng) { let jagoankodekeren = certificate.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .jagoankodekeren`); allow 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.way.display = "none"; btnText.textContent = "Read less"; moreText.style.display = "inline"; } } Kode lengkapnya menjadi seperti ini :
<!DOCTYPE html> <html> <caput> <meta proper name="viewport" content="width=device-width, initial-calibration=one.0"> <title>ini rirle</championship> <style> #more : display:none; </style> </head> <trunk> <header> <nav> <ul> <li><a grade="active" href="#home">Habitation</a></li> </ul> </nav> </header> <master> <article> <div class="kode-jagoan" jagoan-kode="fila"> <h2>Fila Oakmont TR Able-bodied Shoe </h2> <p>Hit the streets with the retro hiker way 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-band eyelets, and durable prophylactic outsole <span class="jagoankodekeren">...</span><span class="more than" 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> <push button onclick="readMore('fila')" form="jagoankodemantap">Read more than</button> </div> </article> <article> <div form="kode-jagoan" jagoan-kode="vans"> <h2>Vans One-time Skool Garden Floral Skate </h2> <p>Vans® is the original action sports footwear and dress brand. Since 24-hour interval i, Vans® has historic 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">...</bridge><span class="more" style="brandish: none;"> clothes, accessories, and snowboard boots, to progressive events like the Vans Warped Bout® and surfing's near prestigious contest, the Vans Usa Open up of Surfing®, Vans® continues to back up today'south innovators and those who live "Off the Wall".Add together some bloom 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 impress canvas upper with signature side stripes, and classic vulcanized sole construction for flexible grip and traction</p> <push onclick="readMore('vans')" class="jagoankodemantap">Read more</push> </div> </article> <article> <div class="kode-jagoan" jagoan-kode="converse"> <h2>Converse Chuck Taylor All Star Hello Sneaker</h2> <p>Get your groove dorsum with the new Chuck Taylor All Star Hi Tie Dye Sneaker from Antipodal! These vivid loftier-top Chucks feature breathable sail uppers with psychedelic tie dye patterns, signature rubber cap toe, and flexible rubber outsole for traction<span form="jagoankodekeren">...</bridge><span class="more than" style="display: none;">. Available exclusively at Journeys!In some ways, y'all know us. Converse has been making Chuck Taylor All Star and I Star sneakers since we started over a century ago, and now nosotros work to make new street style classics. What you clothing defines sport, street, and artistic culture, and nosotros take been redefining it with you lot all along.</p> <button onclick="readMore('converse')" form="jagoankodemantap">Read more</button> </div> </commodity> <commodity> <div class="kode-jagoan" jagoan-kode="adidasek"> <h2>Mens adidas Swift Run RF Athletic Shoe</h2> <p>Brand 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" manner="brandish: none;">midsole for premium shock absorption and support.For over fourscore years, adidas has been office of the globe of athletic and way shoes, delivering state-of-the-fine 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, non against it, to help you reach your highest level of operation 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 take maintained five manufacturing facilities in New England where we go along to rely on the skills and teamwork of our American workforce to produce a percentage of our able-bodied footwear. Nosotros accept also remained strongly committed to a cadre set <bridge course="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 keep to rely on the skills and teamwork of our American workforce to produce a percentage of our athletic footwear. We have too remained strongly committed to a cadre set of company values that include integrity, teamwork and total client satisfaction..</p> <button onclick="readMore('newbalancek')" class="jagoankodemantap">Read more than</button> </div> <section> <div class="kode-jagoan" jagoan-kode="newbalancek1"> <h3>New Balance 574 Summer Mesh Able-bodied</h3> <p>New Balance began equally a Boston-based curvation support visitor in the early 1900'southward, developed into a specialized shoe manufacturer in the 1970's, and has grown to become a leading global athletic products company. Today New Balance is a family of brands<span course="jagoankodekeren">...</span><span class="more than" way="brandish: none;"> including New Rest, Dunham, PF Flyers, Aravon, Warrior and Alkali. Since the days of selling arch supports to law officers and waiters, New Balance has been a make concerned with coming together the needs of the everyday athlete. Part of producing superior footwear and able-bodied apparel is manufacturing it to fit all widths and sizes, because a ameliorate fit produces better operation. To ensure the best fitting, best performing shoes and apparel, we focus on improving our applied science and production methods</p> <push 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 back up company in the early 1900's, developed into a specialized shoe manufacturer in the 1970's, and has grown to become a leading global able-bodied products company. Today New Balance is a family of brands including <span course="jagoankodekeren">...</span><span class="more" style="brandish: none;"> New Residuum, Dunham, PF Flyers, Aravon, Warrior and Brine. Since the days of selling curvation supports to police officers and waiters, New Remainder has been a make concerned with coming together 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> <push onclick="readMore('newbalancek2')" class="jagoankodemantap">Read more</push> </div> </section> </article> <aside> </aside> </principal> <footer> <p>ini footer</p> </footer> <script> <!-- <p> masukan Javascript Sementara Disini </p> --> function readMore(jagoankodeganteng) { permit jagoankodekeren = document.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .jagoankodekeren`); allow moreText = certificate.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .more`); let btnText = certificate.querySelector(`.kode-jagoan[jagoan-kode="${jagoankodeganteng}"] .jagoankodemantap`); if (jagoankodekeren.way.brandish === "none") { jagoankodekeren.style.brandish = "inline"; btnText.textContent = "Read more"; moreText.style.display = "none"; } else { jagoankodekeren.style.brandish = "none"; btnText.textContent = "Read less"; moreText.manner.brandish = "inline"; } } </script> </body> </html> Sipp sekarang simpan dengan nama file alphabetize.html lalu jalankan dibrowser.
Saat salah satu tombol ditekan. Maka tombol read more than yang lain tidak akan terganggu. Karena kita telah mengimplementasikan. Kode dan script nya dengan benar.
KETERANGAN : berfungsi sebagai pembatas teks yang akan dipotong[/su_note]
<span class="more" diatas yang berada pada tag p berfungsi sebagai pembatas teks yang akan dipotong
Demikianlah tutorial ini semoga dapat membantu teman teman semua yang sedang kesulitan.
How to Make Read More Html Code
Source: https://www.jagoankode.com/membuat-single-dan-multiple-read-more-read-less-button-dengan-javascript/
0 Response to "How to Make Read More Html Code"
Post a Comment