Show/Hide

Gli argomenti di questa pagina

  • show / hide
  • Il CSS
  • Il JS
  • L'HTML
  • La demo

show / hide

Questo script fa uso di un piccolo CSS ed un altrettanto breve JS.
show_hide.css
show_hide.js

Il CSS

Le rogole del CSS:
La classe wrap può essere sostituito da qualsiasi altra classe o ID in uso nella propria pagina o, addirittura, eliminato
La classe more serve per il contenitore del messaggio che all'apertura della pagina dovrà rimanere nascosto. Di conseguenza l'unica regola necessaria a questa classe è display: none;
Le classi showLink e hideLink servono per indicare lo stato che si vuole ottenere premendo sui rispettivi link.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.wrap {
    font: 1.3em/1.3 Arial, Helvetica, sans-serif;
    width: 40em;
    margin: 0 auto;
    padding: 1em;
    background-color: #fff; 
}
/* This CSS is used for the Show/Hide functionality. */
.more {
    display: none;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}
a.showLink, a.hideLink {
    text-decoration: none;
    color: #36f;
    padding-left: 8px;
    background: transparent url(down.gif) no-repeat left; 
}
a.hideLink {
    background: transparent url(up.gif) no-repeat left; 
}
a.showLink:hover, a.hideLink:hover {
/*    border-bottom: 1px dotted #36f; */
}

Il JS

Il JS usato per questo esempio legge l'ID va ad agire sull'ID che circonda il contenuto nascosto (getElementById() ).
Il problema dell'ID posto in una pagina sarebbe limitativo in quanto, come è ben noto a chi crea pagine WEB, essendo un elemento univoco, in una pagina può essere creato un unico ID e, di conseguenza, questa funzione potrebbe essere applicata ad un solo contenitore.
Fortunatamente la funzione ci viene in aiuto in quanto richiede il nome dell'ID come parametro ed a noi è sufficiente mandare alla funzione, COME PARAMETRO, l'ID che scegliamo per il contenitore da nascondere e mostrare (in questo caso: <div id="QUALCOSA" class="more">) menzionandolo nei due link:
<a href="#" ... onclick="showHide('QUALCOSA');return false;">Leggi tutto.</a>
<a href="#" ... onclick="showHide('QUALCOSA');return false;">Nascondi tutto.</a>

1
2
3
4
5
6
7
8
9
10
11
12
function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}

L'HTML

Se mi fossi accontentato di avere un solo Show/Hide in una pagina Web, magari neanche avrei preso in considerazione questo script. Ho voluto provare a mettere più contenitori e, addirittura, anche annidati.
Il trucco sta nell'usare diligentemente gli ID da usare per i contenitori da nascondere.
Nel JS leggiamo document.getElementById(shID+'-show'): shID è il nostro ID che mandiamo come argonento della funzione. Quindi dobbiamo prestare attenzione a queste voci, dove dichiariamo il nostro ID: La dichiarazione è visibile nella seconda riga e tutte le altre xxxxxx fanno riferimento a quella.

<a href="#" id="xxxxxx-show" class="showLink" onclick="showHide('xxxxxx');return false;">
<div id="xxxxxx" class="more">
<a href="#" id="xxxxxx-hide" class="hideLink" onclick="showHide('xxxxxx');return false;">

La rappresentazione grafica dei box è visibile in questa immagine.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<p>Un esempio d'uso</p>
<p>In questo contenitore principale vengono nascosto o mostrati tutti i messaggi sottostanti.<br />
<a href="#" id="big_box-show" class="showLink" onclick="showHide('big_box');return false;">Vedi tutti i commenti.</a></p>
<!-- INIZIO CONTEMITORE PRINCIPALE -->
<div id="big_box" class="more">
<p><a href="#" id="big_box-hide" class="hideLink" onclick="showHide('big_box');return false;">Nascondi tutti i commenti.</a></p>

<div class="wrap">
    <h1>Primo elemento</h1>
    <p>Questo &egrave; un primo messaggio.<br />
    <a href="#" id="example_1-show" class="showLink" onclick="showHide('example_1');return false;">Leggi tutto.</a></p>
    <div id="example_1" class="more">
    <p>Congratulazioni! Hai trovato il testo nascosto magia! Cliccando sul link qui sotto si nasconde di nuovo questo contenuto.</p>
    <p>  Questo esempio mostra come creare una mostra / nascondi contenitore con un paio di link, un div, poche righe di CSS, ed alcuni JavaScript per manipolare il nostro CSS. 
      Basta cliccare sul &quot;vedere di pi&ugrave;&quot; link alla fine di questo paragrafo per vedere la tecnica in azione, ed essere sicuri di visualizzare il sorgente per vedere come funziona il tutto insieme.</p>
    <p><a href="#" id="example_1-hide" class="hideLink" onclick="showHide('example_1');return false;">Nascondi questo.</a></p>
    </div>
</div>
<p>&nbsp;</p>
<!-- <div class="wrap"> -->
    <h1>Secondo elemento</h1>
    <p>Questo &egrave; il secondo messaggio<br />
    <a href="#" id="example_2-show" class="showLink" onclick="showHide('example_2');return false;">Leggi tutto.</a></p>
    <div id="example_2" class="more">
    <p>Congratulazioni! Hai trovato il testo nascosto magia! Cliccando sul link qui sotto si nasconde di nuovo questo contenuto.</p>
    <p> Questo esempio mostra come creare una mostra / nascondi contenitore con un paio di link, un div, poche righe di CSS, ed alcuni JavaScript per manipolare il nostro CSS. 
      Basta cliccare sul &quot;vedere di pi&ugrave;&quot; link alla fine di questo paragrafo per vedere la tecnica in azione, ed essere sicuri di visualizzare il sorgente per vedere come funziona il tutto insieme.</p>
    <p><a href="#" id="example_2-hide" class="hideLink" onclick="showHide('example_2');return false;">Nascondi questo.</a></p>
    </div>
<!-- </div> -->

</div>
<!-- FINE CONTENITORE PRINCIPALE -->
<p>Fine del contenitore principale</p>

La demo

Un esempio d'uso

In questo contenitore principale vengono nascosto o mostrati tutti i messaggi sottostanti.
Vedi tutti i commenti.

Nascondi tutti i commenti.

Primo elemento

Questo è un primo messaggio.
Leggi tutto.

Congratulazioni! Hai trovato il testo nascosto magia! Cliccando sul link qui sotto si nasconde di nuovo questo contenuto.

Questo esempio mostra come creare una mostra / nascondi contenitore con un paio di link, un div, poche righe di CSS, ed alcuni JavaScript per manipolare il nostro CSS. Basta cliccare sul "vedere di più" link alla fine di questo paragrafo per vedere la tecnica in azione, ed essere sicuri di visualizzare il sorgente per vedere come funziona il tutto insieme.

Nascondi questo.

 

Secondo elemento

Questo è il secondo messaggio
Leggi tutto.

Congratulazioni! Hai trovato il testo nascosto magia! Cliccando sul link qui sotto si nasconde di nuovo questo contenuto.

Questo esempio mostra come creare una mostra / nascondi contenitore con un paio di link, un div, poche righe di CSS, ed alcuni JavaScript per manipolare il nostro CSS. Basta cliccare sul "vedere di più" link alla fine di questo paragrafo per vedere la tecnica in azione, ed essere sicuri di visualizzare il sorgente per vedere come funziona il tutto insieme.

Nascondi questo.

Fine del contenitore principale

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum