Εδώ είναι το πρώτο μέρος του κειμένου που φενεται πάνω από το READ MORE.Πατήστε το για να δείτε όλο το κείμενο ....Και το υπόλοιπο όπως βλέπετε εμφανίζεται μόλις πατάμε το κουμπί,Μπορεούμε να προσθέσουμε link η διάφορα gadgets τα οποία μπορούμε να τα σπάσουμε για να εξηκονομήσουμε χώρο στην πρώτη σελίδα .Και το υπόλοιπο όπως βλέπετε εμφανίζεται μόλις πατάμε το κουμπί...
......................................
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<p>Εδώ είναι το πρώτο μέρος του κειμένου που φενεται πάνω από το READ MORE.Πατήστε το για να δείτε όλο το κείμενο .<span id="dots">...</span><span id="more">Και το υπόλοιπο όπως βλέπετε εμφανίζεται μόλις πατάμε το κουμπί,Μπορεούμε να προσθέσουμε link η διάφορα gadgets τα οποία μπορούμε να τα σπάσουμε για να εξηκονομήσουμε χώρο στην πρώτη σελίδα .Και το υπόλοιπο όπως βλέπετε εμφανίζεται μόλις πατάμε το κουμπί...</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου