JSFiddle - React, Tailwind, and code Playground

by Satyanshu Acharya

HTML

<section id = "allideas">
<section class="ideaContent">
		<section class="ideator">		
		 	<span class = "name">
		 	 John Mayer 
		 	</span>	 	
		</section>
		<section class = "ideaWrapper isVisible">
		    <section class = "idea">
		    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vitae suscipit elit, non rutrum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at pellentesque risus.
		    </section>
		    <section class="ideaStatus">
		    <span class="spantitle">Status</span>
		    <span class="spanContent">In Process</span>
		    </section>
		</section>
		<section class = "suggWrapper">
			<section class = "suggestion">
			 here is my suggestion
			</section>
		</section>	
		 <section class="ideatorInfo">
			<span><img class="myimg" alt=":"/></span>
		 	<span class = "name">
		 	 John Mayer 
		 	</span>
		 	<span class="spantitle">Email: </span>
		 	<span class="spanContent">[email protected]</span>
		 	<span class="spantitle">SAP ID: </span>
		 	<span class="spanContent">JM0001</span>	
		    <span class="spantitle">Designation: </span>
		 	<span class="spanContent">Vice President</span>	
		 	<span class="spantitle">Department:</span>
		 	<span class="spanContent">Digital Marketing</span>	  
		</section>		
	</section>


<section class="ideaContent">
		<section class="ideator">
		<span><img class="myimg" alt=":"/></span>
		 	<span class = "name">
		 	 Lily Wills 
		 	</span>		 
		</section>
		<section class = "ideaWrapper isVisible">
		    <section class = "idea">
		    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora...

CSS

.ideatorInfo{	
	border-bottom: 1px solid;
    font-size: 1.5em;
    padding-bottom: .3em;
    display:none;
}

.ideator{
    background-color:#c4dfe6;
    cursor:pointer;
    margin-bottom:.5em;
}

.ideator:hover{
   background-color:#003b46;
    color:white;
}

.ideaContent{
    margin: 3em;
    padding: 1em;    
}

.isVisible{
    display:none;
}

JavaScript

$(function() {        
   
    $(document).on('click','.ideator', function(){
        var sections = $('section.ideaWrapper:visible');
      if(!$(this).parent().find(".ideaWrapper").is(':visible')){  					          $(this).parent().find(".ideaWrapper").toggleClass('isVisible');
        sections.toggleClass('isVisible');
                                                }
        else{
        $(this).parent().find(".ideaWrapper").addClass('isVisible');
        }
          
   });
    
 });