Question

I have a page that I would like to be able to use a persistent header, along with clicking on a div and having it work like an accordion. I am able to work the 2 parts when I use them separately, but the code won’t work when I put them together

HTML

<div class="main">
<div>
    <section>
        <h2 class="actog">Header</h2>
        <div class="accon">
            <!--Content Here-->
        </div>
    </section>
    <section>
        <h2 class="actog">Different Header</h2>
        <div class="accon">
            <!--Content Here-->
        </div>
    </section>
    <section>
        <h2 class="actog">Another Header</h2>
        <div class="accon">
            <!--Content Here-->
        </div>
    </section>
</div>
</div>

CSS

.actog {
    color:black;
    margin:5px 0;
    padding:5px;
    width:100%;
    height:auto;
    background-color:green;
    /* Transitions */
}
.actog:hover, .active{
    cursor:pointer;
    text-decoration:underline;
    color:#ff385b;
    background-color:pink;
}
.accon{padding:5px 0;}
.floatingHeader {
    position: fixed;
    margin-top: 0;
    top:0;
    visibility: hidden;
}

And these two snippets of jQuery

jQuery(document).ready(function() {
        jQuery(".actog").next(".accon").hide();
        jQuery(".actog").click(function(){
           $('.active').not(this).toggleClass('active').next('.accon').slideToggle(500);
            $(this).toggleClass('active').next().slideToggle(400);
        });
    });

function UpdateTableHeaders() {
       $(".main div section").each(function() {

           var el             = $(this),
               offset         = el.offset(),
               scrollTop      = $(window).scrollTop(),
               floatingHeader = $(".floatingHeader", this)

           if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
               floatingHeader.css({
                "visibility": "visible"
               });
           } else {
               floatingHeader.css({
                "visibility": "hidden"
               });      
           };
       });
    }

    // DOM Ready      
    $(function() {

       var clonedHeaderRow;

       $(".main div section").each(function() {
           clonedHeaderRow = $(".actog", this);
           clonedHeaderRow
             .before(clonedHeaderRow.clone())
             .css("width", clonedHeaderRow.width())
             .addClass("floatingHeader");

       });

       $(window)
        .scroll(UpdateTableHeaders)
        .trigger("scroll");

    });

Here is A Fiddle

Answer 1

I came up with the final solution

CSS

.actog {
color: black;
margin: 5px 0;
padding: 5px;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background-color: green;
-webkit-transition: .25s;
-moz-transition: .25s;
-o-transition: .25s;
-ms-transition: .25s;
transition: .25s;
}
.actog:hover,.active,.activeClone {
cursor: pointer;
text-decoration: underline;
color: #ff385b;
background-color: pink;
}
.accon {padding: 5px 0; width: 100%;}
.floatingHeader {
position: fixed;
margin-top: 0;
top: 0;
visibility: hidden;
display: none;
}

HTML

<div>
<section>
    <h2 id="1-clone" class="actog">Header</h2>
    <div class="accon">
        04/01/13<b></b>
        04/02/13<b></b>
        04/03/13<b></b>
        04/04/13<b></b>
        04/05/13<b></b>
        04/06/13<b></b>
        04/07/13<b></b>
        04/08/13<b></b>
        04/09/13<b></b>
        04/10/13<b></b>
        04/11/13<b></b>
        04/12/13<b></b>
        04/13/13<b></b>
        04/14/13<b></b>
        04/15/13<b></b>
        04/16/13<b></b>
        04/17/13<b></b>
        04/18/13<b></b>
        04/19/13<b></b>
        04/20/13<b></b>
        04/21/13<b></b>
        04/22/13<b></b>
    </div>
</section>
<section>
    <h2id="2-clone" class="actog">Different Header</h2>
    <div class="accon">
        04/01/13<b></b>
        04/02/13<b></b>
        04/03/13<b></b>
        04/04/13<b></b>
        04/05/13<b></b>
        04/06/13<b></b>
        04/07/13<b></b>
        04/08/13<b></b>
        04/09/13<b></b>
        04/10/13<b></b>
        04/11/13<b></b>
        04/12/13<b></b>
        04/13/13<b></b>
        04/14/13<b></b>
        04/15/13<b></b>
        04/16/13<b></b>
        04/17/13<b></b>
        04/18/13<b></b>
        04/19/13<b></b>
        04/20/13<b></b>
        04/21/13<b></b>
        04/22/13<b></b>
    </div>
</section>
<section>
    <h2 id="3-clone" class="actog">Another Header</h2>
    <div class="accon">
        04/01/13<b></b>
        04/02/13<b></b>
        04/03/13<b></b>
        04/04/13<b></b>
        04/05/13<b></b>
        04/06/13<b></b>
        04/07/13<b></b>
        04/08/13<b></b>
        04/09/13<b></b>
        04/10/13<b></b>
        04/11/13<b></b>
        04/12/13<b></b>
        04/13/13<b></b>
        04/14/13<b></b>
        04/15/13<b></b>
        04/16/13<b></b>
        04/17/13<b></b>
        04/18/13<b></b>
        04/19/13<b></b>
        04/20/13<b></b>
        04/21/13<b></b>
        04/22/13<b></b>
    </div>
</section>

Jquery

function UpdateTableHeaders() {
$(".main div section").each(function() {//select each section in a div in a container with class main
var el = $(this),
    offset = el.offset(),
     scrollTop = $(window).scrollTop();

    floatingHeader = $(".floatingHeader", this);

    var shadow = '#' + floatingHeader.attr('id').replace('-clone','-orig');
     if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height()) && ($(shadow).hasClass('active'))) { //if the header has scrolled past visibility and it has the class of active, then target it
        floatingHeader.css({
            "visibility": "visible", "display":"block" //show header
        })
        .addClass('activeClone') //add class once has scrolled down
        .unbind('click') //remove the action of the first click
        .click(function(){
           $(shadow).click();
        });
    } else {
        floatingHeader.css({
            "visibility": "hidden", "display":"none" //hide header
        })
        .removeClass('activeClone'); //remove the class once scrolled back up
    };
});
}

$(function() {
var clonedHeaderRow;
$(".main div section").each(function() {
clonedHeaderRow = $(".actog", this);
var newId = clonedHeaderRow.attr('id').replace('-clone','-orig');
clonedHeaderRow
.before(clonedHeaderRow.clone().attr('id',newId))
.css("width", clonedHeaderRow.width())
.addClass("floatingHeader"); //add class
});
$(window).scroll(UpdateTableHeaders);
});

jQuery(document).ready(function() {
jQuery(".actog").siblings(".accon").hide();
jQuery(".actog").not('.floatingHeader').click(function() {
$('.active').not(this).toggleClass('active').siblings('.accon').slideToggle(500);
$(this).toggleClass('active').siblings('.accon').slideToggle(400);
});
});

http://codepen.io/burn123/pen/dsbpI