Question

I have a link that once I click a hidden div slides down or up, but it always jumps to the top of the page so I have to go all the way down…

I read I had to store a height but my content is dynamic so I can’t do that…

Css

.resultado{

    text-align: left;
}

Div itself

<div class="resultado">
<a class="mostrar" href="#">mostrar</a>
<div class="datos"><p>Hi</p></div>
</div>

Code

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

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

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

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

        }); 
    });
</script>   

Answer 1

Change:

$('.resultado').delegate('.mostrar','click',function(event){
    $(this).parent().find(".datos").slideToggle();
}); 

to

$('.resultado').delegate('.mostrar','click',function(event){
    event.preventDefault();
    $(this).parent().find(".datos").slideToggle();
}); 

The default behavior of your link is to follow the named anchor and bring the top of the page into focus. By using event.preventDefault you suppress that behavior.