Link con testo a comparsa

[69GiGi96]

Sto provando, come da titolo a realizzare un link che mostra del testo quando viene fatto click.. Con varie ricerche sono arrivato ad una parziale soluzione con:

HEAD: <style> blockquote {display:none} <style>

BODY: <div id="1"><h3>Testo</h3><blockquote>AAA</blockquote></div>

Il codice JS:

var handleText = function(e) {
    e = e || window.event
    h3 = e.target || e.srcElement
    
    blockquote = h3.nextElementSibling
    
    if(blockquote.style.display == 'none')
        blockquote.style.display = 'block'
    else
        blockquote.style.display = 'none'
}

document.getElementById("1").children[0].onclick = handleText

Così facendo, se clicco su "TESTO" (o comunque sulla sua linea, considera il div a quanto pare) compare il blockquote.
L'unico problema è che TESTO viene visto come del normale testo al passaggio del mouse, rendendo la cosa poco intuitiva.. Come potrei renderlo un "link" in modo da renderlo più visibile?

[MAeSI]

Ciao, non so se ho capito bene ma assegnare cursor:pointer all'elemento h3 ti può bastare?

[cavicchiandrea]

<h3 style="cursorointer">Testo</h3>

[69GiGi96]

Grazie! In effetti così facendo funziona, però ho notato altri 2 problemi...
1: mi resta il "cursor: pointer" sull' intera riga quindi l intero div, e non è proprio il massimo da un punto di vista grafico.. Se imposto nel div uno style="width:100px" funziona ma non saprei come adattarlo con precisione alla lunghezza del testo che contiene, dato che andrei ad utilizzare questo sistema su più elementi h3.
2: la comparsa del testo avviene solo dopo che clicco una seconda volta (sia con "cursor: pointer" che senza), è un problema con il codice js che sto utilizzando?

[69GiGi96]

Ho risolto, sempre parzialmente, usando jquery..

$(document).ready(function(){
    $("h3").click(function(){
         if(blockquote.style.display == 'none')
             blockquote.style.display = 'block'
         else
            blockquote.style.display = 'none' });});

Ora mi compare il testo al primo click, ma non lo fa scomparire quando rifaccio click

[MAeSI]

Ciao, se stai usando jQuery prova con slideToggle()

Esempio: https://jsfiddle.net/5hnb9ta5/

[69GiGi96]

Ciao, grazie! Onestamente, ho provato ad usare jquery solo come alternativa per cercare di risolvere il problema..
Comunque slideToggle lo conoscevo già, ma non so come gestirlo quando poi vado ad usare più elementi h3 e blockquote. Infatti se ne piazzo due o più al click su uno degli h3, mi apre anche tutti gli altri blockquote..
Intendo una cosa del genere: https://jsfiddle.net/5hnb9ta5/1/
Indipendentemente dal click su testo o testo2 mi mostra entrambi i blockquote

[cavicchiandrea]

http://webandylab.altervista.org/Desck.php

[69GiGi96]

Non mi è molto chiaro il come, però così facendo funziona!
Grazie mille!

[cavicchiandrea]

Non mi è molto chiaro il come, però così facendo funziona!
Grazie mille!

Prima viene eseguito un ciclo (each) per contare quanti elementi ci sono, al click (solo a quel elemento) viene aperto il nodo figlio. Questo insistesi, per eventuali dettagli devi studiarti jquery e anche un po' di js non farebbe male.