jquery - Toggle Div outside of Current Div -

Currently I have the Toggle option associated with the li element However, I

& lt; Header & gt; & Lt; Ul & gt; & Lt; Li & gt; 1 & lt; / Li & gt; & Lt; Li class = "action" data-content = "# content1" & gt; 2 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Header & gt; & Lt; / Div & gt; & Lt; Div class = "content" id = "content1" & gt; & Lt; P & gt; A group of materials & lt; / P & gt; & Lt; / Div & gt;

Here's my secret to saving space: when I do this, the top part of the div toggle inside the title Can see I want to display it directly under the header element Thanks in advance, people here are always incredibly useful.

The problem is due to : which you specify div # Header . Try it out:

  #header {Overflow: hidden; Top: 0; Left: 0; Width: 100%; Height: 66px; Z-index: 1; Background color: # 000000; }   
    
 or  
 if you want to use the  status: fixed  As you scroll the page, the headers at the top are certain you can use the  margin-head  to  div.content . Try it out:  
  .content {display: none; Width: 500px; Height: 200px; Padding: 10px; Background color: # FF000D; Border: 4 px solid; Margin top: 68px; }