First attach a jQuery file in the example.
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.booklist article{
display:none;
}
</style>
<section>
<ul class="booklist">
<li>
<a>Article Name 1</a>
<article>
<p><content</p>
<img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirtAz6X0FdacvaW5MhAXC-tShe0ioIkMv9wfHA4MGJ9LfEFSNZtgs0JVqL3PE0KoZ2O12t2MWLGRJKriDR5RS4UsoOV99K6efvrE6XRJET-rbISfv9JisHDanUJ2qkpwbiMhuEDr0HsgrW/s1600/capture-20141005-161110.png"/>
<p>more content</p>
<a href="http://www.google.com">Search on google</a>
</article>
</li>
<li>
<a>Article Name 2</a>
<article>
<p><content</p>
<img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdAgNtjIq9GRU9EXHZzi4gLU1wgoHUJ5tCfuXR__-kYT3_sOxmPxySiehWly3U_ZCyTz39KWRAvS7lYvwXMO2nyeL3wkjRIEUA-A-StUb3tDShR8LirYBlIkEw7kvWhopw-HK5qtX5c5uB/s1600/capture-20141004-135246.png"/>
<p>more content</p>
<a href="http://www.google.com">Search on google</a>
</article>
</li>
<li>
<a>Article Name 3</a>
<article>
<p><content</p>
<img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhC6M5MK5rFclQ4q8qtlU9XokJUMB6XC1vbMMdy3feALpA6GdnQvlBi3JS3qWczrkUkZc8YDoZ_l1UtUH5E5GcdI_C_c37YJQyse-_cnkG7d7j-TT80DGHuMFMB78j0zNX5xnLoozJtl3O/s1600/capture-20141003-171024.png"/>
<p>more content</p>
<a href="http://www.google.com">Search on google</a>
</article>
</li>
</ul>
</section>
<script type="text/javascript">
$(".booklist li a").click(function(){
$(this).siblings("article").slideToggle().closest("li").siblings("li").find("article").slideUp();
});
</script>
Output :)
1)
2)
3)
4)
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.booklist article{
display:none;
}
</style>
<section>
<ul class="booklist">
<li>
<a>Article Name 1</a>
<article>
<p><content</p>
<img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirtAz6X0FdacvaW5MhAXC-tShe0ioIkMv9wfHA4MGJ9LfEFSNZtgs0JVqL3PE0KoZ2O12t2MWLGRJKriDR5RS4UsoOV99K6efvrE6XRJET-rbISfv9JisHDanUJ2qkpwbiMhuEDr0HsgrW/s1600/capture-20141005-161110.png"/>
<p>more content</p>
<a href="http://www.google.com">Search on google</a>
</article>
</li>
<li>
<a>Article Name 2</a>
<article>
<p><content</p>
<img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdAgNtjIq9GRU9EXHZzi4gLU1wgoHUJ5tCfuXR__-kYT3_sOxmPxySiehWly3U_ZCyTz39KWRAvS7lYvwXMO2nyeL3wkjRIEUA-A-StUb3tDShR8LirYBlIkEw7kvWhopw-HK5qtX5c5uB/s1600/capture-20141004-135246.png"/>
<p>more content</p>
<a href="http://www.google.com">Search on google</a>
</article>
</li>
<li>
<a>Article Name 3</a>
<article>
<p><content</p>
<img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhC6M5MK5rFclQ4q8qtlU9XokJUMB6XC1vbMMdy3feALpA6GdnQvlBi3JS3qWczrkUkZc8YDoZ_l1UtUH5E5GcdI_C_c37YJQyse-_cnkG7d7j-TT80DGHuMFMB78j0zNX5xnLoozJtl3O/s1600/capture-20141003-171024.png"/>
<p>more content</p>
<a href="http://www.google.com">Search on google</a>
</article>
</li>
</ul>
</section>
<script type="text/javascript">
$(".booklist li a").click(function(){
$(this).siblings("article").slideToggle().closest("li").siblings("li").find("article").slideUp();
});
</script>
Output :)
1)
2)
3)
4)
No comments:
Post a Comment