I have some boxes that a lot of information inside them. I want the information less at first and if the user wants to read more information, they click the button "See More". Then if they click that button, the button named "Copy" will be displayed, and the button named "See More" will be changed into "See Less" through innerHTML.
The code below is working properly but there's a lot of Code. Is there a possibility to make the code shorter?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="content">
<p>This Is a Content Example</p>
</div>
<div class="BTN">
<button class="SM">See More</button>
<button class="Copy">Copy</button>
</div>
</div>
<div class="box">
<div class="content">
<p>This Is a Content Example</p>
</div>
<div class="BTN">
<button class="SM">See More</button>
<button class="Copy">Copy</button>
</div>
</div>
<div class="box">
<div class="content">
<p>This Is a Content Example</p>
</div>
<div class="BTN">
<button class="SM">See More</button>
<button class="Copy">Copy</button>
</div>
</div>
</div>
</body>
</html>
<style>
*{
margin: 0;
padding: 0;
outline: none;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper{
width: 90%;
display: flex;
flex-direction: column;
}
.box{
height: 180px;
background: blue;
width: 100%;
margin-top: 10px;
}
.content{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content p{
font-size: 22px;
color: white;
font-weight: bold;
}
.BTN{
position: relative;
width: 90%;
margin: auto;
display: flex;
justify-content: space-between;
gap: 8px;
height: 32px;
margin-top: -37px;
}
.BTN button{
height: 100%;
width: 100%;
font-size: 18px;
background: yellow;
color: red;
font-weight: bold;
border: none;
border-radius: 5px;
}
.Copy{
display: none;
}
@media(min-width: 600px){
.wrapper{
flex-direction: row;
gap: 10px;
}
}
</style>
<script>
var a = document.getElementsByClassName("SM");
var b = document.getElementsByClassName("Copy");
a[0].addEventListener("click", function(){
if(a[0].innerHTML == "See Less"){
a[0].innerHTML = "See More";
b[0].style.display = "None";
}else{
a[0].innerHTML = "See Less";
b[0].style.display = "block";
}
});
a[1].addEventListener("click", function(){
if(a[1].innerHTML == "See Less"){
a[1].innerHTML = "See More";
b[1].style.display = "None";
}else{
a[1].innerHTML = "See Less";
b[1].style.display = "block";
}
});
a[2].addEventListener("click", function(){
if(a[2].innerHTML == "See Less"){
a[2].innerHTML = "See More";
b[2].style.display = "None";
}else{
a[2].innerHTML = "See Less";
b[2].style.display = "block";
}
});
b[0].addEventListener("click", function(){
alert("You Copied the First Info");
/* Please Create a Code To Copy because I already know and this is a sample. But if there's a possibility to make this code shorter, please include this.*/
});
b[1].addEventListener("click", function(){
alert("You Copied the Second Info");
});
b[2].addEventListener("click", function(){
alert("You Copied the Third Info");
});
</script>
Anyway, if there's a possibility to make the code shorter in JQuery, then I want to accept it. Thank you in advance
You can achieve the same via jquery with very simple code.
Working Example:
$('.SM').click(function() {
$(this).next('.Copy').toggle(); // hide show copy button
//code to change button text
$(this).text(function(i, text){
return text === "See More" ? "See less" : "See More";
})
});* {
margin: 0;
padding: 0;
outline: none;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
width: 90%;
display: flex;
flex-direction: column;
}
.box {
height: 180px;
background: blue;
width: 100%;
margin-top: 10px;
}
.content {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content p {
font-size: 22px;
color: white;
font-weight: bold;
}
.BTN {
position: relative;
width: 90%;
margin: auto;
display: flex;
justify-content: space-between;
gap: 8px;
height: 32px;
margin-top: -37px;
}
.BTN button {
height: 100%;
width: 100%;
font-size: 18px;
background: yellow;
color: red;
font-weight: bold;
border: none;
border-radius: 5px;
}
.Copy {
display: none;
}
@media(min-width: 600px) {
.wrapper {
flex-direction: row;
gap: 10px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="content">
<p>This Is a Content Example</p>
</div>
<div class="BTN">
<button class="SM">See More</button>
<button class="Copy">Copy</button>
</div>
</div>
<div class="box">
<div class="content">
<p>This Is a Content Example</p>
</div>
<div class="BTN">
<button class="SM">See More</button>
<button class="Copy">Copy</button>
</div>
</div>
<div class="box">
<div class="content">
<p>This Is a Content Example</p>
</div>
<div class="BTN">
<button class="SM">See More</button>
<button class="Copy">Copy</button>
</div>
</div>
</div>
</body>
</html>Note: Make sure the jQuery library is included on your page otherwise this code will not work.