Toggle Panel Down - How to change it to Horizontal Menu and Content appears under it?
<p>Currently the menu is sliding to the right and what I actually need is to have all Options 1 and 2 fixed placed and all Contents to slide down under Option 1, even if I choose Option 2. </p>

<p>I've spent the whole day going around this and tried many techniques and nothing. </p>

<p>Any help is much appreciated.
Thank you.</p>

<p><strong>js</strong></p>

<pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

$(function() {
  $("li.content").hide();
  $("ul.navigation").delegate("li.toggle", "click", function() { 
      $(this).next().toggle("fast").siblings(".content").hide("fast");
  });
});

&lt;/script&gt;
</code></pre>

<p><strong>CSS</strong></p>

<blockquote>
<pre><code>&lt;style type="text/css"&gt;

ul {
  display:inline-block;
  list-style:none;
}
li {
  float:left;
}
.content {
  padding-top:20px;
  float:left;
  background-color:#0FC;
}
&lt;/style&gt;
</code></pre>
</blockquote>

<p><strong>HTML</strong></p>

<pre><code>&lt;div&gt;

&lt;ul class="navigation"&gt;
    &lt;li class="toggle"&gt;Option 1&lt;/li&gt;
    &lt;li class="content"&gt;Option 1 Content&lt;/li&gt;

    &lt;li class="toggle"&gt;Option 2&lt;/li&gt;
    &lt;li class="content"&gt;Option 2 Content&lt;br /&gt;Option 2 Content&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;


&lt;div&gt;
-----New Content-----
&lt;/div&gt;
</code></pre>

<p>This is a mockup image showing what I'm trying to do.</p>

<p><a href="http://i.stack.imgur.com/WzoF0.jpg" rel="nofollow">http://i.stack.imgur.com/WzoF0.jpg</a></p>
