Piu DIV con comparsa a tendina

Salve,
volevo sapere dove posso trovare uno script per far si che quando clicco su un link compare un div con effetto tendina verso il basso e quando si chiude il contrario verso l'alto... pero ho più div che dovrebbero fare questa cosa e ognuno ha un id, che pero è dinamico! Sapete come posso fare? Grazieee

Se magari ci dai qualche info in più.

Che vuoi dire con "hanno id dinamico"? Ok che cambia, ma avrai qualcosa per individuarli?

prova a descrivere, o meglio posta un po' di codice, su quello che vuoi fare e come ti stai muovendo.

Si allora, praticamente ho dei messaggi in un database e ho un "for" che li stampa tutti. Ogni messaggio ha un id! Questo è il codice per ogni post.

<div class="message-box">
<p class="info">
<a href="folder/profile.php">user</a>
</p> 
<p class="message">
Prova
</p>
</div> 

<a href="javascript:collapse1.slidedown()">Apri</a> 
<a href="javascript:collapse1.slideup()">Chiudi</a>

<div id="ID MESSAGGIO" class="hidden-info">
INFO NASCOSTE
</div>

<script type="text/javascript">
var collapse1=new animatedcollapse("ID MESSAGGIO", 1000, false)
</script>

E NELLA HEAD HO QUESTO JS http://colore123.altervista.org/animatedcollapse.js

l'HO preso da internet perche di js non so assolutamente niente! gRAZIE IN ANTICIPO

Cos'è che non riesci a fare esattamente?
Hai inserito pure jQuery?

No jQuery non l'ho inserito! Il fatto è che mi serve che questo codice funzioni per più div e non solo per uno dato che i messaggi sono molti! Ma va solo con uno :(

No jQuery non l'ho inserito! Il fatto è che mi serve che questo codice funzioni per più div e non solo per uno dato che i messaggi sono molti! Ma va solo con uno :(

Sulla pagina di Dynamic Drive nelle istruzioni è specificato di inserire due file (jQUery e animatedcollapse.

Magari indica la pagina dove vedere che hai fatto.

Lo preso ha html.it ma non c'era scritto di inserire jquery
http://javascript.html.it/script/ved...iv-a-comparsa/

Non conosco il codice dello script ma dalla pagina di Dynamic Drive (autore dello script, citato pure da html.it) puoi vedere dopo step1 che ti vien detto di includere

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js"> 

A prescindere da questo, linka una pagina dove poter vedere all'opera quello che hai fatto.

L'ho inserito e questo è il link http://colore123.altervista.org/Copia_di_newindex2.html ma anche se metto due box che devo aprirsi comunque non va! Funziona sempre e solo con un solo bx

L'ho inserito e questo è il link http://colore123.altervista.org/Copia_di_newindex2.html ma anche se metto due box che devo aprirsi comunque non va! Funziona sempre e solo con un solo bx

Nella pagina linkata è presente un solo box.

Metti magari la pagina che non riesci a far funzionare

Ok ho inserito un altro box sempre nella stessa pagina! :)

devi inizializzare ogni box (che deve avere un ID unico - non tutti dog nel tuo caso)

Si ora cambio, scusa! Ma ti anticipo che comunque ho provato di tutto compreso id diversi ma comunque non va

non

var collapse1=new animatedcollapse("dog2", 1000, false) 

ma

var collapse1=new animatedcollapse("dog", 1000, false);
var collapse2=new animatedcollapse("dog2", 1000, false); 

uno per ogni DIV

Si ma comunque non va! Non vorrei inserire uno script per ogni post... si apesantirebbe molto la pagina

infatti quello script non credo sia pensato per qual genere di pagine.

Gia penso non si possa fare... in ogni caso se volessi fare una cosa del genere ma senza scomparsa a tendina... una cosa cosi andrebbe bene?

#dog {
display: none;
}

<script>
function show () {
getElementByID(dog).style.display = 'inline';
}
function hide () {
getElementByID(dog).style.display = 'none';
}
</script>

<a href="#" onclick="javascript: show()">Apri</a>
<a href="#" onclick="javascript: hide()">Chiudi</a>

E funzionerebbe con molti div? Ho visto che la funzione puo essere realizzata anche cosi function show(number) (a cosa serve?)

Grazeee...

stavo guardando meglio il codice precedente e dovresti, per farlo funzionare richiamare la funzione js corretta, quindi collapse1, collapse2, ...

show(milliseconds), il numero di millisecondi relativo alla durata dell'animazione.

cmq, anche il farlo funzionare a scomparesa non è così difficile ...

Si gia ho provato ma non va comunque!

Il codice che ho scritto non fiunziona... sai il perche?

Cosa intendi che non è difficile farlo funzionare a scomparsa?? Intendi a realizzare leffeto?

Ho modificato leggermente la tua pagina (tolto completamente lo script e usato due funzioni con l'ausilio di jQuery).

Quello che ne è venuto fuori non è bellissimo, scalabilissimo, ... ma funziona

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    function openDiv(el) {
        $('#' + el).slideDown();
    }
    
    function closeDiv(el) {
        $('#' + el).slideUp();
    }
</script>
<style>
html, body { 
    margin: 0px; 
    padding: 0px;
    background-color: #ACDED6;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: auto;
    height: auto;
    clear: both;
    font-family: tahoma,verdana,arial,sans-serif;
    color: black;
}
.post-box {
    background: white;
    width: 96%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 2%;
    float: left;
    text-align: left;
    top: 0;
    bottom: 0;
    position: relative; 
    height: auto !important;   
    height: 68px;
    min-height: 48px;
    margin-left: 0px;
    border-bottom: 1px solid black;
    line-height: 18px;
    position: relative;
}
.img-post-box {
    width: 58px;
    float: left;
}
.post-img {
    width: 48px;
    height: 48px;
    position: absolute;
}
.message-post-box {
    vertical-align: top;
    overflow: hidden;
    float: top;
    margin-left: 58px;
    padding: 0px;
    margin-top: 0px;
}
.message {
    font-size: 14px;
    margin-top: 2px;
    margin-bottom: 0px;
    padding: 0px;
    float: top;
}
.info-name {
    font-size: 14px;
    float: left;
    text-align: left;
    padding: 0px;
    margin: 0px;
}
.hidden-post-info {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    float: top;
    margin-top: 0px;
    display: none;
}
</style>
</head>
<body>

<div class="post-box">
    <div class="img-post-box">
        <img class="post-img" src="http://colore123.altervista.org/img/default_profile.jpg" />
    </div>
    <div class="message-post-box">
        <p class="info-name"><a class="user" href="folder/profile.php">User</a></p> <br>
        <p class="message">Prova1Prova1Prova1Prova1Prova1Prova1Prova1Prova1Prova1Prova1<br><br><br>
            <a href="javascript:openDiv('dog1')">Apri</a>
        </p>
    </div> 

    <div id="dog1" class="hidden-post-info">
        ELEMENTI NASCOSTI
        <a href="javascript:closeDiv('dog1')">Chiudi</a>
    </div>
</div>

<div class="post-box">
    <div class="img-post-box">
        <img class="post-img" src="http://colore123.altervista.org/img/default_profile.jpg" />
    </div>
    <div class="message-post-box">
        <p class="info-name"><a class="user" href="folder/profile.php">User</a></p> <br>
        <p class="message">Prova2Prova2Prova2Prova2Prova2Prova2Prova2Prova2Prova2Prova2<br><br><br>
            <a href="javascript:openDiv('dog2')">Apri</a>
        </p>
    </div> 

    <div id="dog2" class="hidden-post-info">
        ELEMENTI NASCOSTI
        <a href="javascript:closeDiv('dog2')">Chiudi</a>
    </div>
</div>



</body>
</html> 

No invece è perfetto ahaha!!! Grazie mille non so come avrei fatto senza te :)

Grazieeee ancoraaaaa

No invece è perfetto ahaha!!! Grazie mille non so come avrei fatto senza te :)

Grazieeee ancoraaaaa

E' un diavolo, è stupendo, e serviva anche a me. Di una bravura eccezionale. Molto obbligato.

[downloadeguide]

Posso aiutarti con un comando html: ecco te lo lascio

<a href="javascript://" onclick="$('#4-menu').slideToggle('slow');" class="zagruzka-plus_menu-main" title="Categoria"><img src="Url Immagine" alt="">Categoria<img src="Url Immagine per freccia in basso" alt="" style="margin:0"></a>
<div id="4-menu" class="zagruzka-plus_menu-box" style="padding-bottom: 5px; display: none;">
      <a href="http://downloadeguide.altervista.org/blog/category/giochi-pc/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PC</a><br>
      <a href="http://downloadeguide.altervista.org/blog/category/giochi-ps3" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PS3</a><br>    
      <a href="http://downloadeguide.altervista.org/blog/category/giochi-xbox360" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi XBOX-X360</a><br>
	  <a href="http://downloadeguide.altervista.org/blog/category/wii-u/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi WII U</a><br>   
      <a href="http://downloadeguide.altervista.org/blog/category/giochi-wii/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi WII</a><br>   
      <a href="http://downloadeguide.altervista.org/blog/category/giochi-ps2/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PS2</a><br>   
      <a href="http://downloadeguide.altervista.org/blog/category/giochi-ps1/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PS1</a><br>   
      <a href="http://downloadeguide.altervista.org/blog/category/giochi-psp/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PSP</a><br>   
      <a href="http://downloadeguide.altervista.org/blog/category/giochi-nds/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi NDS</a><br>   
   </div>

Io ho fatto così sul mio sito, poi regolati tu con l'url delle immagini e le altre cose.

[karl94]

È una discussione di quattro anni fa, come da regolamento non riesumate vetuste discussioni.
Chiudo.