title: Applying accordion with div having data-attribute as title
body: <p>I got a structure like this... to display the title before the div with data-attribute.</p>
  
  <p>I want to make it like </p>
  
  <p>1st Title</p>
  
  <p>2nd Title</p>
  
  <p>3rd Title</p>
  
  <p>4th Title</p>
  
  <p>-> Click "1st Title", it becomes</p>
  
  <p>1st Title</p>
  
  <p><em>First Content</em></p>
  
  <p>2nd Title</p>
  
  <p>3rd Title</p>
  
  <p>4th Title</p>
  
  <p>So I want to ask is there any ways that I can apply this accordion on it without changing the html structure (Having ul,li first then show the div)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    display:none;
    }
  
  div:before {
    content:attr(data-title);
    display:block;
    font-size:14px;
    background:gray;
    text-align:center;
    line-height:14px
    }
    
  div {
    background:lightgray;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li id="first"&gt;1st Header&lt;/li&gt;
      &lt;li id="second"&gt;2nd Header&lt;/li&gt;
      &lt;li id="third"&gt;3rd Header&lt;/li&gt;
      &lt;li id="fourth"&gt;4th header&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="first_div" data-title="1st Header title"&gt;First content &lt;br/&gt;1111111111111111111111&lt;/div&gt;
  &lt;div id="second_div" data-title="2nd Header title"&gt;Second content &lt;br/&gt;22222222222222222222&lt;/div&gt;
  &lt;div id="third_div" data-title="3rd Header title"&gt;Third content &lt;br/&gt;33333333333333333333&lt;/div&gt;
  &lt;div id="fourth_div" data-title="4th Header title"&gt;Fourth content &lt;br/&gt;4444444444444444444&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>