Discussione: Testo che compare automaticamente con un clic su un titolo

Ti serve un javascript piccolissimo.

Nella sezione head della pagina crei questo:

Codice:

<script type="text/javascript">
    function toggleDisplay(strId) {
       document.getElementById(strId).style.display = document.getElementById(strId).style.display == 'block' ? 'none' : 'block';
    }
</script>

Crei tutti i paragrafi, li nascondi e gli assegni un attributo ID facile da ricordare, ad esempio così:

Codice:

<p style="display:none;" id="capitolo1">Bla bla bla...</p>

Infine crei i titoli dei capitoli da cliccare e fai in modo che ognuno passi alla funzione il valore dell'attributo ID:

Codice:

<h1 onclick="toggleDisplay('capitolo1')">Titolo del primo capitolo</h1>

Visto che la funzione lavora utilizzando il valore di ID è necessario che questo valore sia scritto nello stesso modo (maiuscole/minuscole comprese) sia all'interno dell'attributo del tag P sia all'interno della chiamata alla funzione al click sul tag H1.

Gli ID degli elementi di una pagina HTML sono univoci, questo vuol dire che non devi utilizzare mai lo stesso ID per due elementi diversi.

grazie molte...mi sei stato davvero d'aiuto..ora chiedo una altra cosa...vorrei che il testo che si visualizza non appena si clicca sul titolo comparisse con sotto uno sfondo o un riquadro come questo:

come si può fare...nn so di CSS o altro..

se il rettangolo è di dimensione fissata che so 100px per 70px allora ti basta ritagliare il rettangolo in 3 parti:

-top (con i primi che so 15px, cioè il lato superiore con i due angoli arrotondati)
-center (questo può o non può servire dipende se metti degli effetti sul bordo del rettangolo)
-bottom (gli ultimi 15px)

a questo punto crei un div (rettangolo) con all'interno 3 div (top, center, bottom) e per ognuno ci metti come background uno di questi elementi


se invece vuoi fare un rettangolo di dimensioni qualsiasi è più complicato perchè devi creare un div (rettangolo) all'interno del quale devi avere un div (top) suddiviso in altri 3 div (sinistra, centro, destra) [i div sinistra e destra avranno come background gli angoli e quello centrale potrà esser lungo quanto vuoi], un div (center) e un div (bottom) suddiviso in altri 3 div come per il top

appena ho 10 min ti mostro un disegno riepilogativo.. cmq googlando trovi

mmm...capito un po..ma non so fare questa cosa con i DIV quindi se mi potresti fare un codice generale cosi a me viene più semplice cmq il rettangolo è questo:
è di diemsioni 498x224 chiaramente la larghezza deve essere quella..è l'altezza che cambiera in base al testo...

al momento non ho ancora trovato 15 min liberi.. ora devo scappare a mangiare... cmq non è difficile.. i DIV sono contenitori che poi puoi modificare tramite css... cmq un po di html e css lo devi sapere...

cercherò di essere il più chiaro possibile... in ogni caso quando posterò non copiare e basta cerca di capire così poi lo puoi usare in qualsiasi caso

si infatti...perchè cosi non ho un idea chiara...ti ringrazio

allora oggi son riuscito a fare delle immagini, ma non penso di riuscire a finire la spiegazione... intanto inizio, se ne frattempo ti leggi qualcosa di css base è meglio così non devo entrare troppo nel dettaglio... in ogni caso ho preferito spiegarti come creare un rettangolo di dimensioni a piacere:

da photoshop devi ritagliare il rettangolo come indicato in allegato, fatto ciò devi salvare i singoli angolini come file png con sfondo trasparente per i nomi puoi usare top_sx per il primo in alto a sinistra, top_dx per quello in alto a destra, bottom_sx e bottom_dx per quelli bassi. Ora se non hai effetti strani lungo il bordo questi 4 angoli sono l'unica cosa che ti serve!

prima di spiegarti l'html e il css vediamo un po a logica come dovrebbe essere diviso il lavoro

e ti rimando quindi alla seconda img in allegato, nella tua bella pagina html ad un certo punto dovrai avere un contenitore (che sarà quello che conterrà tutto il rettangolo), all'interno del quale avrai 3 contenitori:

- top, diviso a sua volta in 3 parti
- center
- bottom, diviso a sua volta in 3 parti

precisamente nell'html avrai:

Codice HTML:

<div id="all">

    <div id="top">
        <div id="top_sx"></div>
        <div id="top_center"></div>
        <div id="top_dx"></div>
    </div>

    <div id="center"></div>

    <div id="bottom">
       	<div id="bottom_sx"></div>
        <div id="bottom_center"></div>
        <div id="bottom_dx"></div>
     </div>

</div>

ora andiamo ad impostare il css! per prima cosa diamo una dimensione al contenitore all.. mettiamo che lo vogliamo fare 300px per 200px

Codice:

#all {
    width:300px;
    height:200px;
}

dopo di che dobbiamo andare a dare le dimensioni di top, center e bottom

Codice:

#top {
    height:25px;
}

#center {
    height:150px;
    background-color:#626262;
}

#bottom {
    height:25px;
}

se ti stai chiedendo perchè 25px è facile.. è l'altezza in px dell'immagine con l'angolino (quelle che abbiamo salvato prima in png,cambia a seconda di come hai fatto il ritaglio)... 150 invece è l'altezza 200 meno 50 (cioè due angolini) il colore #626262 è il colore del rettangolo.. lo puoi conoscere guardando il valore in photoshop

infine dobbiamo dare gli sfondi ai 3+3 sotto contenitori

Codice:

#top_sx {
    float:left;
    height:25px;
    width:25px;
    background-image:url(top_sx.png);
    background-repeat:no-repeat;
}

#top_center {
    float:left;
    height:25px;
    width:250px;
    background-color:#626262;
}

#top_dx {
    float:right;
    height:25px;
    width:25px;
    background-image:url(top_dx.png);
    background-repeat:no-repeat;
}

questo vale per i contenitori top (per i bottom ti basterà riscrivere lo stesso cambiando tutti i top in bottom)

il comando float serve per far fluttuare i div... normalmente questi vengono posti uno sotto l'altro, con il comando float invece vengono messi affiancati a destra o a sinistra.

il comando background-image:url(...); serve per richiamare un immagine, nel nostro caso quelle degli angolini, mettendo anche il comando background-repeat:no-repeat; l'immagine non verrà ripetuta.