JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div class="toggle5">
                <div class="teamcolor">
                    <div class="teamcolor-padding">Hello
                        <div data-id="1"><span class="x">x</span></div>

                    </div>
                </div>
                
                
</div>
                <div class="hidden5">This is the message</div>


            <div class="toggle5">
                <div class="teamcolor">
                    <div class="teamcolor-padding">Goodbye
                        <div data-id="2"><span class="x">x</span></div>

                    </div>
                </div>
                
              
</div>
             
     <div class="hidden5">This is the message 2</div>

CSS

.toggle5{padding:15px;border-bottom:1px solid #ccc;list-style-type:none;}
.toggle5:hover {list-style-type:none;background-color:#E1E1E1;}
.hidden5{display: none;padding:15px;margin-bottom:0px;margin-top:0px;border-bottom:1px solid #ccc;}

JavaScript

$(document).ready(function(){
    $('.toggle5').click(function(){
        var next = $(this).next('.hidden5');
        $('.hidden5').not(next).slideUp(200);
        if(next.is(':visible')){
            next.slideUp(200);
        }else {
            next.slideDown(200);
        }
    });
    
    $('.x').click(function(){
        var p = $(this).parents().eq(3);

        var notId = $(this).parent().data('id');
        
        /** un comment this block
        $.get('answers/delete-notification.php',
              {id: notId},
              function(data){
                  if(data == '1'){
                      p.next('.hidden').remove();
                      p.slideUp(250, function(e){
                          $(this).remove();
                      });
                  }
              }
         ); **/
        
        // remove code between #######
        p.next('.hidden5').remove();
        var parentToggle = p.slideUp(250, function(e){
                $(this).remove();
        });
        // #######
    });
});