There were several questions about this implementation of the spoiler.

How to change how the text appears with toggle (), so that it appears from top to bottom, and not left-top to right-down?

And how to remove the underscore from the active spoiler?

$(document).ready(function() { $('.spoiler_links').click(function() { $('.spoiler_body').hide(500); $(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); $('.spoiler_links1').click(function() { $('.spoiler_body1').hide(500); $(this).parent().children('div.spoiler_body1').toggle('normal'); return false; }); }); 
 .spoiler_body, .spoiler_body1 { display: none; } .spoiler_links, .spoiler_links1 { cursor: pointer; } a { font-size: 20px; text-decoration: none; color: #6B8841; border-bottom: 1px dashed #6B8841; } .act { border: 1px solid red; } p { color: #6B8841; } td { margin: 10px; vertical-align: top; min-width: 400px; max-width: 400px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td> <div class="container"> <a href="" class="spoiler_links"><strong>ัะฟะพะนะปะตั€</strong></a> <div class="spoiler_body"> <p>ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚</p> </div> </div> <div class="container"> <a href="" class="spoiler_links"><strong>ัะฟะพะนะปะตั€</strong></a> <div class="spoiler_body"> <p>ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚</p> </div> </div> </td> <td> <div class="container"> <a href="" class="spoiler_links1"><strong>ัะฟะพะนะปะตั€</strong></a> <div class="spoiler_body1"> <p>ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚</p> </div> </div> <div class="container"> <a href="" class="spoiler_links1"><strong>ัะฟะพะนะปะตั€</strong></a> <div class="spoiler_body1"> <p>ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚</p> </div> </div> </td> </tr> </tbody> </table>

1 answer 1

 $(document).ready(function() { $('.spoiler_links').click(function(e) { e.preventDefault(); $('.spoiler_links_current').removeClass('spoiler_links_current'); $(this).toggleClass('spoiler_links_current'); $('.spoiler_body').slideUp(); $(this).next().slideDown(); }); }); 
 td { margin: 10px; vertical-align: top; min-width: 400px; max-width: 400px; } .spoiler_body{ display: none; color: #6B8841; } .spoiler_links{ font-size: 20px; text-decoration: none; color: #6B8841; border-bottom: 1px dashed #6B8841; } .spoiler_links_current { border-bottom: 1px dashed transparent; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tbody> <tr> <td> <div class="container"> <a href="" class="spoiler_links"><strong>ัะฟะพะนะปะตั€</strong></a> <div class="spoiler_body"> <p>ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚</p> </div> </div> <div class="container"> <a href="" class="spoiler_links"><strong>ัะฟะพะนะปะตั€</strong></a> <div class="spoiler_body"> <p>ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚</p> </div> </div> </td> <td> <div class="container"> <a href="" class="spoiler_links"><strong>ัะฟะพะนะปะตั€</strong></a> <div class="spoiler_body"> <p>ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚</p> </div> </div> <div class="container"> <a href="" class="spoiler_links"><strong>ัะฟะพะนะปะตั€</strong></a> <div class="spoiler_body"> <p>ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚ ั‚ะตะบัั‚</p> </div> </div> </td> </tr> </tbody> </table>