Buongiorno a tutti, ancora una volta ho bisogno del vostro aiuto.....
faccio sempre un gran pasticcio con parent() e next()

devo fare una lista (senza ul) con delle informazioni e cliccando su "dettagli" si deve aprire il cassettino relativo....... finchè non ho div annidati, riesco abbastanza, ma con l'annidamento mi "annodo"

questo è il codice
codice HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.row {
  border:1px solid red;
    margin: 10px;
}
#no-more-tables {
    display: none;
}
-->
</style>
</head>

<body>

<div id="farine" class="section-content">

    <div class="row">
        <div class="col-sm-12">
            <div class="farine-item">
                <div class="farine-thumb">
                    <p>testo</p>
                    <p><a href="javascript:;" class="largeButton moreBgColor">Dettagli</a></p>
                </div> <!-- /.farine-thumb -->
            </div> <!-- /.farine-item -->
        </div> <!-- /.col-sm-12 -->
    </div> <!-- /.row -->
    <div class="row">
        <div class="col-sm-12">
            <section id="no-more-tables" class="hidden">
                <table class="table-bordered table-striped table-condensed cf">
                  <thead class="cf">
                    <tr>
                      <th>TIPO FARINA</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td data-title="TIPO FARINA">FARINA &quot;00&quot;</td>
                    </tr>
                  </tbody>
                </table>
            </section>
        </div>
    </div> <!-- /.row -->


    <div class="row">
        <div class="col-sm-12">
            <div class="farine-item">
                <div class="farine-thumb">
                    <p>testo2 </p>
                    <p><a href="javascript:;" class="largeButton moreBgColor">Dettagli</a></p>
                </div> <!-- /.farine-thumb -->
            </div> <!-- /.farine-item -->
        </div> <!-- /.col-sm-12 -->
    </div> <!-- /.row -->
    <div class="row">
        <div class="col-sm-12">
            <section id="no-more-tables" class="hidden">
                <table class="table-bordered table-striped table-condensed cf">
                  <thead class="cf">
                    <tr>
                      <th>TIPO FARINA</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td data-title="TIPO FARINA">FARINA &quot;0&quot;</td>
                    </tr>
                  </tbody>
                </table>
            </section>
        </div>
    </div> <!-- /.row -->
    
</div> <!-- /#farine -->

    <script src="js/jquery-1.10.2.min.js"></script>
    <script>
$(document).ready(function () {

    $('a.moreBgColor').css("color", "red");

    $('a.moreBgColor').click(function() {
        $('.open').slideToggle( "slow" ).toggleClass('open');
        $(this).closest('farine-item').parent().parent().next('#no-more-tables').toggleClass('close').slideToggle("slow").css("color", "red");
    });

});
</script>

</body>
</html>
mi potreste aiutare?
grazie
Claudia