Add and remove classes for multiple elements (JQuery & JavaScript)

I was able to get a suitable answer to edit the code in my previous question.

Link to previous question:
https://stackoverflow.com/questions/76328546/add-and-remove-classes-for-multiple-elements/76328793#76328793

Now I have developed the previous code and added content to it that when the icon is clicked, its content will be shown or hidden.

The problem with this code is that by clicking on any of the available icons, the contents of all of them will appear or hide.

But that's not what I want. I want to display the corresponding content by clicking on each icon, and by clicking on another icon, all the content will be hidden and only the content related to the icon that was clicked will be displayed.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('body').on('click', '.icon_product', function() {
$(this).toggleClass("change_icon-product");
$(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
$(this).find(".txt-content").toggleClass("Toggle_txt-content");
});

<!-- language: lang-css -->

.icon_product {
display: inline-block;
cursor: pointer;
position: relative;
padding: 15px;
margin-top: 0px;
}
.icon-line1_product,
.icon-line2_product {
width: 35px;
height: 5px;
background-color: #f00;
margin: 6px 0;
border-radius: 10px;
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
}
.icon-line2_product {
transform: rotate(90deg) translate(-11px, 0px);
-webkit-transform: rotate(90deg) translate(-11px, 0px);
-moz-transform: rotate(90deg) translate(-11px, 0px);
-o-transform: rotate(90deg) translate(-11px, 0px);
-ms-transform: rotate(90deg) translate(-11px, 0px);
}
.change_icon-product .icon-line1_product {
transform: rotate(45deg) translate(8px, 0px);
-webkit-transform: rotate(45deg) translate(8px, 0px);
-moz-transform: rotate(45deg) translate(8px, 0px);
-o-transform: rotate(45deg) translate(8px, 0px);
-ms-transform: rotate(45deg) translate(8px, 0px);
}
.change_icon-product .icon-line2_product {
transform: rotate(-45deg) translate(8px, 0px);
-webkit-transform: rotate(-45deg) translate(8px, 0px);
-moz-transform: rotate(-45deg) translate(8px, 0px);
-o-transform: rotate(-45deg) translate(8px, 0px);
-ms-transform: rotate(-45deg) translate(8px, 0px);
}
/* 
*
*
*
*/
.txt-content {
display: none;
}
.Toggle_txt-content {
display: block;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
<div class="txt-content">
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
</p>
</div>
</div>
</div>
<div class="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
<div class="txt-content">
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
</p>
</div>
</div>
</div>
<div class="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
<div class="txt-content">
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
</p>
</div>
</div>
</div>
</section>

<!-- end snippet -->

So, you want to remove other contents too, if another one is open for that you only had to add one line of code :

$(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");

The above line removes or hides other contents once the another one opens.

Here is the demo :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('body').on('click', '.icon_product', function() {
$(this).toggleClass("change_icon-product");
$(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
$(this).find(".txt-content").toggleClass("Toggle_txt-content");
$(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");
});

<!-- language: lang-css -->

body {
background: transparent; /* Make it white if you need */
color: #fcbe24;
padding: 0 24px;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.icon_product {
display: inline-block;
cursor: pointer;
position: relative;
padding: 15px;
margin-top: 0px;
}
.icon-line1_product,
.icon-line2_product {
width: 35px;
height: 5px;
background-color: #f00;
margin: 6px 0;
border-radius: 10px;
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
}
.icon-line2_product {
transform: rotate(90deg) translate(-11px, 0px);
-webkit-transform: rotate(90deg) translate(-11px, 0px);
-moz-transform: rotate(90deg) translate(-11px, 0px);
-o-transform: rotate(90deg) translate(-11px, 0px);
-ms-transform: rotate(90deg) translate(-11px, 0px);
}
.change_icon-product .icon-line1_product {
transform: rotate(45deg) translate(8px, 0px);
-webkit-transform: rotate(45deg) translate(8px, 0px);
-moz-transform: rotate(45deg) translate(8px, 0px);
-o-transform: rotate(45deg) translate(8px, 0px);
-ms-transform: rotate(45deg) translate(8px, 0px);
}
.change_icon-product .icon-line2_product {
transform: rotate(-45deg) translate(8px, 0px);
-webkit-transform: rotate(-45deg) translate(8px, 0px);
-moz-transform: rotate(-45deg) translate(8px, 0px);
-o-transform: rotate(-45deg) translate(8px, 0px);
-ms-transform: rotate(-45deg) translate(8px, 0px);
}
/* 
*
*
*
*/
.txt-content {
display: none;
}
.Toggle_txt-content {
display: block;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
<div class="txt-content">
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
</p>
</div>
</div>
</div>
<div class="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
<div class="txt-content">
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
</p>
</div>
</div>
</div>
<div class="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
<div class="txt-content">
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
</p>
</div>
</div>
</div>
</section>

<!-- end snippet -->