Question 219797 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript Element opening and closing problem

<script>
    var a = document.querySelector('.secenek-1');
    var b = document.querySelector('.secenek-1-kismi');
    
    a.addEventListener("click",function(e){
        e.preventDefault
        b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
    })
    var c = document.querySelector('.secenek-2');
    var d = document.querySelector('.secenek-2-kismi');
    
    c.addEventListener("click",function(e){
    
        e.preventDefault
        d.classList.contains("showing") ? d.classList.remove("showing") : d.classList.add("showing");
    })
    var e = document.querySelector('.secenek-3');
    var f = document.querySelector('.secenek-3-kismi');
    e.addEventListener("click",function(e){
        e.preventDefault
        f.classList.contains("showing") ? f.classList.remove("showing") : f.classList.add("showing");
    })
</script>

I want that if .secenek-1-kismi div is open, if i clicked secenek-2, .secenek-1-kismi will close and .secenek-2-kismi will open

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    ill fix it.

        <script>
         
        function js_div_show(value) {
            for (var i = 1; i < 5; i++) {
                if (value == i) { 
                    var yakalanan = document.getElementById('div_show_' + i);
                    yakalanan.style.display = "block"; 
                } else {
                    var yakalanmayan = document.getElementById('div_show_' + i);
                    yakalanmayan.style.display = "none";
                }
            }
        } 
    </script>
     <div class="col-xs-3 menu-root-item" onclick="js_div_show(1);">
 <img>
<h2></h2>
</div>


  2. 0

    To achieve the behavior you described, you’ll need to modify the event listeners. You can add conditional checks to close any open sections before opening the clicked section. Here’s the updated code:

    <script>
    var a = document.querySelector('.secenek-1');
    var b = document.querySelector('.secenek-1-kismi');
    a.addEventListener("click", function(e) {
        e.preventDefault();
        if (!b.classList.contains("showing")) {
            // Close other sections if open
            var openSections = document.querySelectorAll('.showing');
            openSections.forEach(function(section) {
                section.classList.remove("showing");
            });

            b.classList.add("showing");
        } else {
            b.classList.remove("showing");
        }
    });

    var c = document.querySelector('.secenek-2');
    var d = document.querySelector('.secenek-2-kismi');
    c.addEventListener("click", function(e) {
        e.preventDefault();
        if (!d.classList.contains("showing")) {
            // Close other sections if open
            var openSections = document.querySelectorAll('.showing');
            openSections.forEach(function(section) {
                section.classList.remove("showing");
            });

            d.classList.add("showing");
        } else {
            d.classList.remove("showing");
        }
    });

    var e = document.querySelector('.secenek-3');
    var f = document.querySelector('.secenek-3-kismi');
    e.addEventListener("click", function(e) {
        e.preventDefault();
        if (!f.classList.contains("showing")) {
            // Close other sections if open
            var openSections = document.querySelectorAll('.showing');
            openSections.forEach(function(section) {
                section.classList.remove("showing");
            });

            f.classList.add("showing");
        } else {
            f.classList.remove("showing");
        }
    });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search