Ado Ado - 3 months ago 8
jQuery Question

jQuery hide appended div items

I have the following code and I am trying to hide/show only the inner/appended items, such as text1, text2 and text3:

HTML:

<div id="div1">
<a href="#" id="clickItem">LINK</a>
<br />
text1
<br />
text2
<br />
text3
</div>


jQuery:

var hide = false;
$("#clickItem").click(function (e) {
if (hide == false) {
$("#div1").hide();
hide = true;
return;
}
else {
$("#div1").show();
hide = false;
return;
}
});

Answer

you can wrap the inner text in a div and toggle the inner div onclick of the link. please check below snippet for more idea.

var hide = false;
$("#clickItem").click(function (e) {
  $("#innerPart").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <a href="#" id="clickItem">LINK</a>
  <div id="innerPart">
    <br />
    text1
    <br />
    text2
    <br />
    text3
  </div>                    
</div>