A Pen by Joe Schmoe.

Collapsible-Hover-Table-of-Contents.markdown

Collapsible Hover Table of Contents

A Pen by Joe Schmoe on CodePen.

License.

index.html

<div class="globalWrapper">
<div id="tableOfContents">
    <h2><a id="toc" href="#">Table of Contents</a></h2>
    <div class="sectionsWrapper closed">
    <dl class="sections">
      <dt><a class="subsection" href="#">1. Definitions</a></dt>
        <div class="subsectionContent">
          <dd><a href="#sec11" data=""-offset="70">1.1. What is design?</a></dd>
          <dd><a href="#sec12" data=""-offset="70">1.2. What is good design?</a></dd>
          <dd><a href="#sec13" data=""-offset="70">1.3. Ten principles of good design</a></dd>
          <dd><a href="#sec14" data=""-offset="90">1.4. An example</a></dd>
          <dd><a href="#sec15" data=""-offset="90">1.5. Video: <i>Objectified</i> trailer</a></dd>
          <dd><a href="#sec16" data=""-offset="90">1.6. Is your product well-designed?</a></dd>
        </div>
      <dt><a class="subsection" href="#">2. Different kinds of design</a></dt>
        <div class="subsectionContent">
          <dd><a href="#sec21" data=""-offset="80">2.1. Graphic Design</a></dd>
          <dd><a href="#sec22" data=""-offset="80">2.2. Interaction Design</a></dd>
          <dd><a href="#sec23" data=""-offset="90">2.3. Industrial Design</a></dd>
        </div>
      <dt><a class="subsection" href="#">3. Data: what does the industry think?</a></dt>
        <div class="subsectionContent">
          <dd><a href="#sec31" data=""-offset="90">3.1. What qualities of design do startups <br />consider most important?</a></dd>
          <dd><a href="#sec32" data=""-offset="90">3.2. How important is product design?</a></dd>
          <dd><a href="#sec33" data=""-offset="90">3.3. How deep does design go?</a></dd>
        </div>
      <dt><a class="subsection" href="#">4. Designer Founders: the missing link</a></dt>
        <div class="subsectionContent">
          <dd><a href="#sec41" data=""-offset="90">4.1. Startups + designers = ?</a></dd>
          <dd><a href="#sec42" data=""-offset="90">4.2. Meet the Designer Founders</a></dd>
          <dd><a href="#sec48" data=""-offset="50">4.8. Changing the world</a></dd>
        </div>
      <dt><a class="subsection" href="#">5. Finding great talent</a></dt>
        <div class="subsectionContent">
          <dd><a href="#sec51" data=""-offset="250">5.1. Okay, I need a designer.</a></dd>
          <dd><a href="#sec52" data=""-offset="250">5.2. Go Where the designers are</a></dd>
          <dd><a href="#sec54" data=""-offset="220">5.3. Resources</a></dd>
        </div>
      <dt><a class="subsection" href="#">About me & Acknowledgements</a></dt>
        <div class="subsectionContent">
          <dd><a href="#section6" data=""-offset="70">6.   About me</a></dd>
          <dd><a href="#section7" data=""-offset="90">7.   Acknowledgements</a></dd>
        </div>
    </dl><!-- / sections -->
    </div><!-- / sectionsWrapper -->
  </div><!-- / tableOfContents -->
</div>

script.js

	// Table of Contents
	var sectionsHeight = $('.sections').height();
	$('.sectionsWrapper').css({ bottom: '-' + sectionsHeight + 'px', visibility: 'visible' });

	$('#toc').click(function(){
		if($('.sectionsWrapper').hasClass('closed')){
			$('.sectionsWrapper').removeClass('closed');
			$('.sectionsWrapper').stop().animate({ bottom: '34px' }, 200);
		}else{
			$('.subsectionContent').hide(100, function(){
				$('.sectionsWrapper').addClass('closed');
				$('.sectionsWrapper').stop().animate({ bottom: '-' + sectionsHeight + 'px' }, 200);
			});
		}
		return false;
	});

	$('.subsection').click(function(){
		$('.subsectionContent').hide(100);
		$(this).parent().next('.subsectionContent').show(200);

		return false;
	});
	$('#toc').mouseenter(function(){
		if($('.sectionsWrapper').hasClass('closed')){
			$('.sectionsWrapper').removeClass('closed');
			$('.sectionsWrapper').stop().animate({ bottom: '34px' }, 200);
		}else{
			$('.subsectionContent').hide(100, function(){
				$('.sectionsWrapper').addClass('closed');
				$('.sectionsWrapper').stop().animate({ bottom: '-' + sectionsHeight + 'px' }, 200);
			});
		}
		return false;

	});

	$('#tableOfContents').mouseleave(function(){
		$('.subsectionContent').hide(100, function(){
			$('.sectionsWrapper').addClass('closed');
			$('.sectionsWrapper').stop().animate({ bottom: '-' + sectionsHeight + 'px' }, 200);
		});
	});

style.css

body { background: #000; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; background-image: url('http://i.imgur.com/n4O2kR2.jpg'); }

/* -- Table of Contents -- */

#tableOfContents {
    width: 320px;
    color: #fff !important;
    background: #222;
    float: left;
    position: fixed;
    bottom: 0;
    left: calc(25% - 160px);
    z-index: 11;
    font-size: 13px;
    font-weight: normal;
}

#tableOfContents h2 {
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    width: 100%;
    margin: 0 !important;
    line-height: 26px;
    z-index: 10;
    background: #EC6060;
    position: relative;
}

#tableofContents:hover {
  background: #985f56;
}

#tableOfContents h2 a {
    
    background: url("../img/tocArrow.jpg") no-repeat top left;
    padding: 10px 0 10px 50px;
    width: 270px;
    display: block;
}

#tableOfContents h2 a:hover {
    background: #985f56; 
}

#tableOfContents a {
    color: #fff;
    text-decoration: none;
    width: 280px;
    padding: 6px 10px;
    margin: 0;
    display: block;
}

#tableOfContents a:hover {
    background: #333;
}

.sectionsWrapper {
    padding-left: 40px;
    background: transparent;
    position: absolute;
    width: 280px;
    bottom: -200px;
    visibility: hidden;
}

#tableOfContents dl {
    margin: 0;
    overflow: hidden;
    background: #343E56;
    padding: 0 0 20px 0;
    width: 280px;
    z-index: 10;
}

#tableOfContents dt {
    padding: 0;
    font-weight: 400;
}

.subsectionContent {
    display: none;
}

.subsectionContent dd a {
    color: #eee !important;
    padding-left: 25px !important;
    font-weight: 300;
}

see Demo here: http://codepen.io/JoeSchmoe09/pen/lacIo