Κρύψτε και Αποκρύψτε κείμενο ή εικόνα με χρήση JavaScript

Με ένα πολύ μικρό κομμάτι κώδικα μπορείτε να κρύψετε και να αποκρύψετε κείμενο και εικόνες από το άρθρο σας όπως για παράδειγμα το χρησιμοποιώ εγώ με το κουμπάκι πάνω από τον κώδικα παρακάτω.


Μπορεί να γίνει με δύο τρόπους. Πρώτον μπορείτε να το βάλετε μέσα στο HTML του άρθρου σας και να το κάνετε χρήση μόνο μέσα σε αυτό ή δεύτερον να το βάλετε μέσα στο template σας για να το χρησιμοποιείτε πάντα.

Από τον Blogger σας πηγαίνετε στο μενού [Πρότυπο] και επιλέξτε [Επεξεργασία προτύπου]. Με Ctrl + F βρείτε το και ακριβώς από πάνω του επικολλήστε τον παρακάτω κώδικα.

<script language="javascript">
/* tetsitech.blogspot.com */
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Προβολή";
}
else {
ele.style.display = "block";
text.innerHTML = "Απόκρυψη";
}
} 
</script>

Τώρα στο σημείο που θέλετε να κρύψετε το κείμενό σας, μέσα στο άρθρο σας, βάλτε το παρακάτω:

<a href="javascript:toggle();" id="displayText">Προβολή/Απόκρυψη</a>
<div id="toggleText" style="display: none;">Εδώ είναι το κρυμμένο κείμενο</div>

Αλλάξτε το none από τον παραπάνω κώδικα με block, αν θέλετε στην αρχή να φαίνεται το κείμενο.

Σε περίπτωση που θέλετε, μέσα στο ίδιο άρθρο, να κάνετε παραπάνω από μία φορά χρήση αυτής της μεθόδου, τότε πρέπει να ξαναγράψετε τους παραπάνω κώδικες με διαφορετικό όνομα στο function. Για παράδειγμα toggle2(), toggle3() κλπ αλλά προσοχή μην το παρακάνετε γιατί θα κάνει το blog σας πολύ βαρύ και θα καθυστερεί στη φόρτωση.

Δηλαδή:

<script language="javascript">
/* tetsitech.blogspot.com */
function toggle2() {
var ele = document.getElementById("toggleText2");
var text = document.getElementById("displayText2");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Προβολή";
}
else {
ele.style.display = "block";
text.innerHTML = "Απόκρυψη";
}
} 
</script>

και

<a href="javascript:toggle2();" id="displayText2">Προβολή/Απόκρυψη</a>
<div id="toggleText2" style="display: none;">Εδώ είναι το κρυμμένο κείμενο</div>

0 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ