CODEWITHSUNDEEP
htmlcsszurb-foundation
Elaine Marley
Elaine Marley

Reputation: 2233

Scroll to bottom of a div that was hidden after it is displayed

I have a website made with foundation 4 and I have an accordion in the footer. It's just a link that when you click, it expands with further information. It works but I have to manually scroll to see the new content after it's displayed, and the user will not notice anything has happened after the click so I need the page to scroll automatically after he clicks so he can see the expanded content.

My Accordion is this (http://foundation.zurb.com/docs/v/4.3.2/components/section.html):

<div class="section-container accordion" data-section="accordion" data-options="one_up:false;">
    <section>
        <p class="title" data-section-title><a href="#">CLICK TO SEE MORE</a></p>
        <div class="content" data-section-content>
            <p>The hidden content is here</p>
        </div>
    </section>
</div>

Upvotes: 0

Views: 55

Answers (1)

mk14
mk14

Reputation: 134

Using jquery will allow you to scroll the page on click, to allow the accordion container to be visible:

$(document).ready(function(){
   $(".title").click(function(event){
    event.preventDefault();


    var sectionHeight = $('.section-container').height();
    var target_offset = $(this).offset();

    //this variable sets your target anchor place, adjust as needed
    var target_top = target_offset.top-sectionHeight;

    $('html, body').animate({scrollTop:target_top}, 1500);
    });
});

Upvotes: 1

Related Questions