So what I’m trying to achieve is when a user clicks on any item in the navigation it will scroll down (I’m using a wordpress plugin for this part) the page to that section. Once the page has arrived the content should be shown. The content by default should be hidden until the user clicks on a link in the navigation.

Any help is greatly appreciated.

http://www.bootply.com/TFI6rj2yqQ

THE HTML

 <nav class="navbar navbar-default" role="navigation">
      <!-- Mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <!-- Collect the nav links for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse"><ul id="main-menu" class="nav navbar-nav"><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a rel="m_PageScroll2id" href="#divorce">divorce</a></li>
    <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a rel="m_PageScroll2id" href="#seperationagreements">seperation agreements</a></li>
    <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a rel="m_PageScroll2id" href="#familylaw">family law</a></li>
    <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a rel="m_PageScroll2id" href="#childcustody">child custody</a></li>
    <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a rel="m_PageScroll2id" href="#more">& more</a></li>
    </ul></div>  <p class="sectiontext"><i>(click on the title to be quickly directed to that section)</i></p>
    </nav>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.
    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p> </p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.
    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p> </p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.
    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p> </p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.
    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p> </p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
      <div id="content" class="col-md-9 content"><div id="#divorce"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.
    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p> </p>
    </div>
    <div class="col-md-12 slug divorce">
            <div class="col-md-3 title"><h2 col-md-3="">About</h2></div>
                <div id="content" class="col-md-9 content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed fringilla magna, et vehicula augue. Curabitur auctor libero vel placerat laoreet. In vel iaculis dui, in sagittis purus. Maecenas ut tortor in lorem varius varius. Nam a orci a eros iaculis laoreet non vitae ante. Proin vestibulum elit id enim interdum lacinia. Cras ut porttitor leo. Nam vulputate porttitor varius.
    Aenean in elementum erat. Praesent porttitor metus vel gravida aliquet. Aenean convallis risus fringilla nisl condimentum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vehicula risus ut orci imperdiet, ut condimentum urna pulvinar. Duis vitae pharetra ante. Praesent vitae felis non purus sollicitudin rhoncus eu eu felis. Ut est purus, fringilla nec gravida a, scelerisque ac tortor. Duis in facilisis purus. Curabitur sed felis vel sapien varius facilisis.</div>
                <p> </p>
    </div>

The CSS

.hidden{
    visibility: hidden;
}

The Javascript

    function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).ready(function(){
     $('.content').each(function(){
        if(!isScrolledIntoView($(this))){
            $(this).addClass('hidden');
        }
    });
$(document).on('scroll', function(){
    $('.hidden').each(function(){
        if(isScrolledIntoView($(this))){
            $(this).removeClass('hidden').css({ 'display' : 'none' }).fadeIn();
        }
    });
});
});

Read more here: Clicking on navigation link will show it’s content for that section


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , ,

Wordpress related questions and answers: