onclick divの下に同じdivが表示されます。もう一度私はクリックを隠すかdivを削除する

Question

div(class="a")をクリックするとその内容がdivになり、同じdivの下に表示されます。

同じdivをもう一度クリックすると、下に表示されているコンテンツは表示されません。

は、ここで私はjqueryのか、JSを使用してソリューションを必要とする私のHTML

<div class=""> 
    Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh 
</div><br> 
<div class=""> 
    Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh 
</div><br> 
<div class=""> 
    Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh 
</div> 

です。 DIVの後にテキストを挿入する後

Answer 1

使用、アイテムが存在する場合、その存在削除する

は、次のことを試してみてくださいかどうかを確認するためにクラスを使用します。

$('div').click(function() { 
    $(this).toggleClass('red'); 
    if ($(this).next().is('.isVisible')) {//test if the item is present 
    $(this).next().remove();//remove it 
    } else { 
    $(this).after('<div class="isVisible">' + $(this).text() + '</div>');//add it 
    } 
}); 

デモ：https://jsfiddle.net/bq1hewvs/8/

Answer 2

チェックアウトこの：

 
 

 
     $(document).ready(function(){ 
 
      $('div.one p').css("visibility", "hidden"); 
 
      $('div.two p').hide(); 
 
      $('div.one').click(function(){ 
 
       $('div.one p').css("visibility", "visible"); 
 

 
       $('div.two p').toggle(); 
 
      }); 
 

 

 
     }); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="one" style="border:2px solid red; width:50% ;height:30%;" > 
 
    <p>content</p> 
 
</div> 
 
<div class="two"><p>div two content</p></div>