Question

I’m trying to hide/show some divs depending on what button is clicked. Every time I click a different button to show a certain div, it jumps to the top of the page. I’m also using Ruby on Rails if that is relevant. I’ve tried using return false as well, but that isn’t working either. Anyone have any ideas? Thanks.

Javascript:

$(document).ready(function(){
    $('#new-event-button').click(function(e){
        e.preventDefault();
        $('#edit-events').hide();
        $('#delete-events').hide();
        $('#new-event').slideDown();
    });
    $('#edit-events-button').click(function(e){
        e.preventDefault();
        $('#new-event').hide();
        $('#delete-events').hide();
        $('#edit-events').slideDown();
    });
    $('#delete-events-button').click(function(e){
        e.preventDefault();
        $('#new-event').hide();
        $('#edit-events').hide();
        $('#delete-events').slideDown();
    }); 
});

View Code:

<button id="new-event-button">New Event</button>
<button id="edit-events-button">Edit Events</button>
<button id="delete-events-button">Delete Events</button>

<div id="events-forms">
    <div id="new-event">
        <%= render :partial => "new_event", :locals => { :event => Event.new(:timeline_id=>@timeline.id) } %>
    </div>

    <div id="edit-events">
        <%= render :partial => "edit_events", :locals => { :events => current_user.events } %>  
    </div>

    <div id="delete-events">
        <%= render :partial => "delete_events", :locals => { :events => current_user.events } %>        
    </div>
</div>

Answer 1

Well if the div#events-forms you are filling has no height when you click the buttons, it’s height will become 0 and then expand again to fit it’s content. Thats what triggering the browser to jump back up, because there is no more content to display.

-If possible you can give the containing div#event-forms a fixed size, so only the content is changing and not the height of the element.

#events-forms{
border: 1px solid black;
height:400px;

-Otherwise you could maybe look into changing the height of the containing div first (with javascript/jquery) to fit the data you want to paste into it.

if you use the following css snippet you can see the div growing and expanding, this might make it easier to understand why you are being set to the top of the page.

#events-forms{
    border: 1px solid black;
}