Question

Hi I have a problem…

I have to show all the results generated from a mysql query using php, in the end I generate a “block” that shortened is like this:

<div class="resultado">

    <div class="titulo_articulo">

        <h2>Título del artículo</h2>

    </div>

    <div class="detalles_articulo">    

        <div class="datos_articulo">    

            <div class="encabezado_autores">
                <img src="images/gente.png"><span> AUTORES</span>
            </div>

            <div class="autores_instituciones">
                <li>Daniel OC - UTPL</li>
                <li>Francisco V - UTPL</li>
            </div>      

        </div>

    </div>

</div>

Sometimes searches return 5 results, so that code is inserted 5 times considering the different values (I’m not supposed to use antyhing that is not .hide() and .slide, so that’s why I get a looot of code)…

I have a line generated for each result:
Mostrar resultado n1

That line is clicked and the following event is called:

<script type="text/javascript">
    $(document).ready(function(){

        $(".resultado").hide(); 

        $('.mostrar').click(function(e){
            $(".resultado").slideToggle();          
        }); 
    });
</script>

Ok, so what do I do to use only once that event? Otherwise I have to give 5 different ids and place the script 5 times…

Answer 1

I did this to make it work:

Created a div called resultado with the a href inside of it, it has the class mostrar, the block that i posted has the class datos, this is the resulting script that made it:

<script type="text/javascript">
    $(document).ready(function(){

        $(".datos").hide();

        $('.resultado').delegate('.mostrar','click',function(event){

          $(this).parent().find(".datos").slideToggle();

        }); 
    });
</script>

HTML ended up like this

<div class="resultado">

    <a class="mostrar" href="#">Mostrar/Ocultar resultado 1</a>

    <div class="datos">

        <div class="titulo_articulo">

            <h2>Título del artículo</h2>

        </div>

        <div class="detalles_articulo">    

            <div class="datos_articulo">    

                <div class="encabezado_autores">

                    <img src="images/gente.png"><span> AUTORES</span>

                </div>

                <div class="autores_instituciones">

                    <li>Daniel OC - UTPL</li>
                    <li>Francisco V - UTPL</li>

                </div>      

            </div>

        </div>

    </div>

</div>