Rettangolo con testo al click del mouse

[R.Rufino]

Ehi ragazzi, ho una cosa così nella index del sito che sto facendo per prova:

http://i46.tinypic.com/wv34o9.jpg

Ora, vorrei che cliccando su una di quelle scritte (altro non sono che dei link in una lista, per il momento) nel rettangolo compaia un determinato testo. Per ogni link, una scritta diversa nel rettangolo.

Esempio: all'apertaura della pagina, siamo su News e il rettangolo mostra il testo che viene mostrato se si clicca su News. Cliccando su Eventi, il testo nel rettangolo scompare (magari lentamente, l'effetto sarebbe più bello) e compare (altrettanto lentamente magari) il testo corrispondente ad Eventi.

So che è possibile, dato che l'ho visto su molti siti e mi sembra una "tecnica" molto diffusa...

Sapreste dirmi come fare e cosa usare? Javascript, JQuery?

Ah, se può servire:

Questo il codice della pagina html: http://pastebin.com/Ybu0QWxm
Questo quello del CSS: http://pastebin.com/RW7evr0e

[Nazza97]

Sicuramente Jquery...

Per La comparsa "lenta", usa fadeIn("slow") , per la comparsa veloce, fadeOut("slow").


Un esempio molto veloce...

<script type='text/javascript'>
$(document).ready(function () {
$('._notif').toggle(function() {
$('p').show("slow");
}, function() {
$('p').hide("slow");
});
});
</script>
<div class="_notif">Cliccami</div>
<p style="border:1px solid black;">Mostro Questo Testo Al Click.</p>

[R.Rufino]

Ho cercato un po' su internet e stavo smanettando con JQuery.

Quel che voglio, in effetti, mi sembra molto semplice da scrivere.

Ho buttato giù qualche riga al volo, visto che non conosco per niente JQuery/Javascript, ma conosco altri linguaggi di programmazione, dunque non mi risulta difficile capire la sintassi.

Questo è quel che ho scritto, che tra l'altro fa al mio caso... Anche se non sarà la soluzione più pulita/corretta he possa adottare: http://pastebin.com/MRvBdb29

Dreamweaver mi da errore alla riga dell'else. E, ovviamente, il codice non va.

Sapreste dirmi dov'è l'errore?

[cavicchiandrea]

Prova cosi:

    $(function() {
            $("#news").click(function() {
                    if($('#rectangle').is(':visible') ) {
                            $("#rectangle").hide(2000);
                    }
                    else {
                            $("#rectangle").show(2000);
                    }
            });
    });

oppure cosi

    $(function() {
            $("#news").click(function() {
                    if($('#rectangle').css('visibility') == 'visible' ) {
                            $("#rectangle").hide(2000);
                    }
                    else {
                            $("#rectangle").show(2000);
                    }
            });
    });

P.S. Chiaramente rectangle deve essere visibility:hidden/visibile
P.S.S. Non testare jquery con dreamweaver usa la console di firefox
P.S.S.S Ho qualche dubbio controllando visibility e usando hide (che opera sul display)

[R.Rufino]

Grazie cavicchiandrea, ho optato per la prima soluzione e va benissimo.

Dunque l'errore era nei due ; dopo le parentesi graffe dell'if e dell'else... Tipici errori di sintassi da novizio del linguaggio

[cavicchiandrea]

Dubito che fosse quello più facile che nel if ci fosse !

[R.Rufino]

Mah, non saprei :S

In effetti mi sembrava strana la presenza di un ! all'interno dell'if, ma sai, non conoscendo il linguaggio ed avendo visto quella sintassi su un esempio trovato online, credevo fosse giusto :/

Anyway, ho capito una cosa: JQuery è davvero forte

[cassano]

Ma non c'è un errore qui ?

($('#rectangle').

non deve essere cosi ?

$("#rectangle")

oppure prende sia " che ' ?

[R.Rufino]

Dubito siano le virgolette a dare il problema.

Il . richiama una funzione (show/hide), duque è corretto.

Credo sia il !, come diceva cavicchiandrea.

[Vindav]

in js usare i doppi apici o gli apici singoli è indifferente, diversamente da alcuni linguaggi server come java, che considera i doppi apici per identificare le stringhe e gli apici singoli i caratteri.