Show/Hide HTML στοιχεία με JavaScript




Σήμερα θα δούμε πως μπορούμε να κάνουμε απόκρυψη και εμφάνιση ενός HTML στοιχείου πολύ απλά χρησιμοποιώντας JavaScript .
Ένα πολύ χρήσιμο trick , ειδικά για αυτούς που χρησιμοποιούν πολλά HTML/JavaScript gadgets στην πλαϊνή τους μπάρα .
Με αυτό το Script μπορούμε να αποκρύψουμε τα gadgets μας ,εξοικονομώντας έτσι χώρο και τα gadgets μας θα εμφανιστούν μόνο όταν κάνουμε κλικ στον τίτλο του gadgets μας .

Δείτε το σε λειτουργία στην πλαϊνή μου μπάρα [ +/- Τα banners των φίλων μου! ] , για να καταλάβετε καλύτερα για τι πρόκειται .

Για να το εγκαταστήσουμε στο blog μας ακολουθούμε τα εξής απλά βήματα :

ΒΗΜΑ 1ο : 

1 . Συνδεθείτε στο Blogger λογαριασμό σας και πηγαίνετε  Σχεδίαση >> Επεξεργασία HTML και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων 

2 . Βρείτε στο πρότυπό σας την ετικέτα  ]]></b:skin>  και επικολλήστε τις παρακάτω γραμμές του κώδικα ακριβώς από πάνω :


.commenthidden {display:none}
.commentshown {display:inline}

 3 . Τώρα βρείτε στο πρότυπό σας την ετικέτα  </head> και επικολλήστε τον παρακάτω κώδικα ακριβώς από πάνω :  

<!-- togglecomments script --> 
<script type='text/Javascript'>
function togglecomments (postid) { 
var whichpost = document.getElementById(postid); 
if (whichpost.className==&quot;commentshown&quot;) { whichpost.className=&quot;commenthidden&quot;; } else { whichpost.className=&quot;commentshown&quot;; } 
}  
</script>

 ΒΗΜΑ 2ο :

Τώρα , όποιο HTML/JavaScript gadget  θέλουμε να αποκρύψουμε απλά θα το εισάγουμε  ανάμεσα στους παρακάτω κωδικούς :

<a aiotitle="click to expand" href="javascript:togglecomments(' Ε δω το id του gadget ')" 
><h2> +/- ΕΔΩ Ο ΤΙΤΛΟΣ ΤΟΥ GADGET ΜΑΣ </h2></a><br /> 
<div class="commenthidden" id="Εδω παλι το ιδιο  id του gadget  "> 

 Εδώ θα εισάγουμε τον κώδικα για το HTML/JavaScript gadget    

</div>

 Δείτε ένα παράδειγμα χρήσης για καλύτερη κατανόηση :

 Ας πούμε ότι θέλω να αποκρύψω το ShoutMix gadget , τότε ο κώδικας μου θα μοιάζει κάπως έτσι :  


<a aiotitle="click to expand" href="javascript:togglecomments(' ShoutMix ')">
<h2>+/- Πείτε τα όλα εδώ  ! </h2></a><br /> 
<div class="commenthidden" id=" ShoutMix ">

<!-- Begin ShoutMix - http://www.shoutmix.com -->  
 <iframe scrolling="auto" width="300" frameborder="0"  
src="XXXXX" height="400" title="χχχ">  
 <a href="http://shoutmix./?χχχχ">View shoutbox</a> </iframe> <br /> 
 <a href="http://www.shoutmix " title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a> 
 <br /> <!-- End ShoutMix -->

</div>


Τώρα αποθηκεύουμε το HTML/JavaScript gadget μας και έχουμε τελειώσει ! 

Αυτό είναι όλο !!!  Εύκολο δεν είναι ?!!

Σημαντικό :  Στο παραθυράκι Διαμόρφωση HTML/JavaScript  δεν θα εισάγουμε ξανά τίτλο για το HTML/JavaScript gadget μας .
Αφήνουμε το πεδίο για τον τίτλο κενό ! Γιατί έχουμε ορίσει ήδη τίτλο μέσα στον κώδικα που χρησιμοποιήσαμε !

Για όποιες  απορίες , αφήστε το σχόλιό σας !

Καλή επιτυχία σε όλους  ...

Κατηγορίες:
Σχόλια