Tuesday, October 7, 2014

How to prevent toggle effect when an inside anchor is clicked?

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)

No comments:

Post a Comment