I was able to get a suitable answer to edit the code in the previous question.
Link to previous question: Adding and removing classes for multiple elements
Now I have developed the previous code and added content so that when the icon is clicked its content will be shown or hidden.
The problem with this code is that by clicking on any available icon, the contents of all icons are shown or hidden.
But this is not what I want. I want to display the corresponding content by clicking on each icon, and when clicking another icon, all the content will be hidden and only the content related to the clicked icon will be displayed.
$('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"); });
.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; }
<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>
So you want to remove other content too, if another content is open you just add a line of code:
Once another row is opened, the row above will remove or hide other content.
This is the demo: