Vertical Timeline keep events title hidden on untill user click year button

Question

I need a timeline script that can show years in vertical formation.

I came across one which is fine but i am not able to hide the actual events under each years by default or either keep events for current or last year open.

I have setup example on fiddle

Actual example is here https://github.com/technotarek/timeliner.

I want to do following with script

1. Make only Timeline years visible and when one click on the years it shows up events for that year.
2. I want to change the animation as slide from top as that might look nice.

I will also try further to see if i can do something about it any help in this regard is highly appreciate.

HTML

<div class="container">
    <div class="timelineContainer" id="timelineContainer">
      <div class="timelineToggle">
        <p><a class="expandAll">+ expand all</a></p>
      </div><br class="clear">

      <div class="timelineMajor">
        <h2 class="timelineMajorMarker"><span>1954</span></h2>

        <dl class="timelineMinor">
          <dt id="19540517"><a>Brown v. Board of Education</a></dt>

          <dd class="timelineEvent" id="19540517EX" style="display:none;">
            <h3>May 17, 1954</h3>

            <p>The U.S. Supreme Court hands down a unanimous 9-0 decision in
            the Brown v. Board of Education of Topeka case, opening the door
            for the civil rights movement and ultimately racial integration in
            all aspects of U.S. society. In overturning Plessy v. Ferguson
            (1896), the court rules that “separate educational facilities are
            inherently unequal.”<sup>1</sup></p><br class="clear">
          </dd><!-- /.timelineEvent -->
        </dl><!-- /.timelineMinor -->
      </div><!-- /.timelineMajor -->


      <br class="clear">
    </div>
  </div><!-- /.container -->

  <div class="container">
  </div>&gt;<!-- /.container -->

This is how i want it..

UPDATE: I managed to make it work to some extend but still need to be fixed further like it show all event for year click as open which it should not show details of event unless i click on the event.. and when one clicks on the event years it should then hide all its event again my latest fiddle http://jsfiddle.net/axRSC/6/ I managed to pull it this far but still need to fix above concerns

Answer 1

1 :: Starting state of info ::

Modify your initializer as follows:

    $.timeliner({
        startState: 'closed'
    });

2 :: Slide animation ::

Modify openEvent() and closeEvent functions in timeliner.js as follows:

    function openEvent(eventHeading,eventBody) {
        $(eventHeading)
            .removeClass('closed')
            .addClass('open')
            .animate({ fontSize: settings.fontOpen }, settings.baseSpeed);
        $(eventBody).slideDown(settings.speed*settings.baseSpeed); // <-- slideDown
    }

    function closeEvent(eventHeading,eventBody) {
        $(eventHeading)
            .animate({ fontSize: settings.fontClosed }, 0)
            .removeClass('open')
            .addClass('closed');
        $(eventBody).slideUp(settings.speed*settings.baseSpeed); // <-- slideUp
    }

:: UPDATE 3 ::

FIDDLE