Kelas untuk menambah dan mengalih keluar berbilang elemen (JQuery dan JavaScript)

Question

Saya dapat jawapan yang sesuai untuk mengedit kod dalam soalan sebelumnya.

Pautan kepada soalan sebelumnya: Tambah dan alih keluar kelas untuk berbilang elemen

Sekarang saya telah membangunkan kod sebelumnya dan menambah kandungan, apabila ikon diklik kandungannya akan ditunjukkan atau disembunyikan.

Masalah dengan kod ini ialah dengan mengklik mana-mana ikon yang tersedia, kandungan semua ikon ditunjukkan atau disembunyikan.

Tetapi ini bukan yang saya mahu. Saya ingin memaparkan kandungan yang sepadan dengan mengklik pada setiap ikon, dan apabila mengklik ikon lain, semua kandungan akan disembunyikan dan hanya kandungan yang berkaitan dengan ikon yang diklik akan dipaparkan.

$('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>

Answer 1

Jadi, anda mahu mengalih keluar kandungan lain juga, jika kandungan lain dibuka, anda hanya menambah satu baris kod:

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

Sebaik sahaja baris lain dibuka, baris di atas mengalih keluar atau menyembunyikan kandungan lain.

Ini demonya:

$('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");
 });

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;
}

sssccc


            

                

                    

                    


                    

                        
Lorem ipsum
                        

                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        
                    

                
            

            

                

                    

                    


                    

                        
Lorem ipsum
                        

                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        
                    

                
            

            

                

                    

                    


                    

                        
Lorem ipsum
                        

                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.