Menu
Hello there I have a code the heading is clickable and then the paragraph is appear but what is when we go to the text it make to copy the text. but I want it to clickable like the mouse will change to hand or something. the code I listed below.
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.text,
input {
display: none;
}
.active+.text {
display: block;
}
</style>
</head>
<body>
<h2>
<div>
<p style="font-family: DINpro; font-size: 24px;">Project Services ↓</p>
<div class="text" style="font-size: 18px; font-weight: 400; line-height: 24px; font-family: DIN pro;">Wanneer de gobo’s gereed zijn begeleiden we de installatie en stellen we de projectoren af. Alles voor het het best mogelijke resultaat.</div>
</div>
</h2>
<script>
var icons = document.getElementsByTagName('p');
for (var p = 0; p < icons.length; p++) {
icons[p].addEventListener('click', function() {
this.classList.toggle('active');
});
}
</script>
</body>
</html>
277
asked Nov 21 '25 19:11
I add one more class for your header text to control toggle effect. And add effect like clickable on it.
.clickable-header{
cursor: pointer;
}
And the heading element with class "clickable-header"
<p class="clickable-header" >
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.text,
input {
display: none;
}
.active+.text {
display: block;
}
.clickable-header{
cursor: pointer;
}
</style>
</head>
<body>
<h2>
<div>
<p class="clickable-header" style="font-family: DINpro; font-size: 24px;">Project Services ↓</p>
<div class="text" style="font-size: 18px; font-weight: 400; line-height: 24px; font-family: DIN pro;">Wanneer de gobo’s gereed zijn begeleiden we de installatie en stellen we de projectoren af. Alles voor het het best mogelijke resultaat.</div>
</div>
</h2>
<script>
var icons = document.getElementsByTagName('p');
for (var p = 0; p < icons.length; p++) {
icons[p].addEventListener('click', function() {
this.classList.toggle('active');
});
}
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
