Jquery Click() function scroll & Open content slide?

Question

please take a look at this Fiddle

HTML

<div class="content-slide-menu">
<ul class="menu">
    <li id="link1"> <a href="#null" data-page="page1">blah blah</a>

    </li>
    <li id="link2"> <a href="#null" data-page="page2">twit twoo</a>

    </li>
</ul>
</div>
<div class="content-slide">
<div id="page1" class="content">
     <h3>blah blah</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo     sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
    <div class="dots"><span>...</span>
    </div>
</div>
<div id="page2" class="content">
     <h3>twit twoo</h3>

    <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
    <div class="dots"><span>...</span>
    </div>
</div>
</div>
<div style="clear:both;"></div>
<div class="content-slide-menu">
<ul class="menu">
    <li id="link3"> <a href="#null" data-page="page3">Sit Amet</a>

    </li>
    <li id="link4"> <a href="#null" data-page="page4">lorem ipsum</a>

    </li>
</ul>
</div>
<div class="content-slide">
<div id="page3" class="content">
     <h3>Sit Amet</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
    <div class="dots"><span>...</span>
    </div>
</div>
<div id="page4" class="content">
     <h3>lorem ipsum</h3>

    <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
    <div class="dots"><span>...</span>
    </div>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer"> 
<a href="#null" title="Twit Twoo" id="twit-twoo">Twit Twoo</a>
<br>
<a href="#null" title="lorem ipsum" id="lorem-ipsum">lorem ipsum</a>
</div>

CSS

.content-slide-menu {
float:left;
width:220px;
padding:0 10px;
}
.content-slide-menu li {
list-style-type:none;
}
.content-slide-menu a {
text-decoration:none;
color:#2b2b2b;
font-size:135%;
}
.content-slide-menu a:hover {
color:#3ca3c5;
}
.content-slide {
float:left;
width:440px;
margin-top:65px;
}
.content-slide .content {
display:none;
}
.content-slide .content h3 {
font-size: 150%;
font-weight: bold;
}
.content-slide .content p {
margin:5px 0;
font-size:110%;
}
.dots {
font-size:350%;
font-weight:bold;
 }
.active {
color:#3ca3c5!important;
}


#footer {margin-top:800px;}

JAVA

$(document).ready(function () {
$(".menu a").click(function () {
    var $this = $(this),
        $slider = $this.closest('.content-slide-menu');
    $slider.next().children('.content').hide();
    $("#" + $this.data("page")).show();
    $slider.find('a.active').removeClass("active");
    $this.addClass('active');
});
$('.content-slide-menu li:first-child a').click()
});

I have the content slide working as I want thanks to @Arun P Johny However I now want to be able to click through to these different slides from else where on my site.

I want links on other pages and in my footer which click through to the section of the page that has the content slider on and opens it to that particular slide.

I also want this click function to offset from the top by 105px (I have a sticky top nav) Any help with this would be greatly appreciated as I have experimented with on click functions and can get it to scroll to the section containing the content slide w/ an offset but not open specific slides :(

Thanks in advance !

Answer 1

I would create a function for showing a specific page in a specific slider, that you can call then from anywhere of the site:

function showPage(menu, page) {
    $slider = $(".content-slide-menu[data-menu='" + menu + "']").first();
    $slider.next().children('.content').hide();
    $("#page" + page).show();
    $slider.find('a.active').removeClass("active");
    $("#link" + page).children().addClass('active');
}
function showAndScroll(menu, page) {
    showPage(menu, page);
    $('html, body').animate({
        scrollTop: $slider = $(".content-slide-menu[data-menu='" + menu + "']").first().offset().top
    }, 1000);
}
$(document).ready(function () {
    $(".menu a").click(function () {
        var $this = $(this),
            $slider = $this.closest('.content-slide-menu');
        showPage($slider.data("menu"), $this.data("page"));
    });
    $(".content-slide-menu").each(function(index, that) {
        showPage($(that).data('menu'), $(that).find("a").first().data('page'));
    });
});

For the scrolling, I made use of this answer: https://stackoverflow.com/a/6677069/2526054

I added the code to Fiddle so that you can try it. Hope it is what you were looking for. http://jsfiddle.net/veT6z/24/