Jquery - HTML - show e hide singoli

**sys14** · 05-07-2014, 12:30

Salve ragazzi. Ho scritto questo modulo che però non funziona:

codice HTML:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e){
  e.preventDefault();
  $(".risposta").hide();
  $('div[id^=domanda]').show().click(function(){$(this).next().slideToggle()});
});
</script>
</head>
<body>
<div class="Domande biologia">

<h4>Biologia</h4>
<a href="#" class="domanda" id="Domanda1">1</a>
<div id="Risposta1" class="risposta">
<p>Domanda1</p>
</div>

<a href="#" class="domanda" id="Domanda2">2</a>
<div id="Risposta2" class="risposta">
<p>Domanda2</p>
</div>

</div>
</body>
</html>

Desidero che ogni id sia cliccabile e mostri la Riposta con id relativo.

Cosa sbaglio?

**sys14** · 05-07-2014, 12:47

Sono arrivato a riscrivere tutto, ma ogni domanda ha un pezzo in jq e anche in css. C'è un modo che non mi permette di aggiungere queste parti, ogni qual volta devo aggiunngere una domanda con un nuovo id?

codice:

<html>
<head>
<meta rel="author" href="http://Crunchify.com" content="">
 
<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".id1").click(function() {
            $(".domanda1").toggle();
        });
    $(".id2").click(function() {
            $(".domanda2").toggle();
        });
    });
</script>
 
<style type="text/css">
div.domanda1,p.id1 {
    margin: 0px;
    padding: 5px;
    text-align: center;
    background: #ddd;
    border: solid 1px #fff;
}
 
div.domanda1 {
    widht: 50%;
    height: 100px;
    display: none;
}

div.domanda2,p.id2 {
    margin: 0px;
    padding: 5px;
    text-align: center;
    background: #ddd;
    border: solid 1px #fff;
}
 
div.domanda2 {
    widht: 50%;
    height: 100px;
    display: none;
}
</style>
</head>
 
<body>
    <p class="id1">1</p>
     <div class="domanda1">
        <p>Risposta1</p>
    </div>
    <br>
    <br>
     <p class="id2">2</p>
     <div class="domanda2">
        <p>Risposta2</p>

</div>
 
</body>
</html>

Discussione: Jquery - HTML - show e hide singoli

Strumenti discussione

Ricerca discussione

Visualizza

Jquery - HTML - show e hide singoli

Permessi di invio