html - How to make javascript accordion support with mobile? - Wordpress

Question

I make accordion in my wordpress blog. But it seems that the accordion not supported with mobile browser and cannot be opened. Is there any way to fix it? Thank You

Notes: in desktop the accordion can be opened.

The url: https://blog.bookingtogo.com/destinasi/tempat-wisata-di-bali/

I will share the code, my accordion code like this:

function add_shortcode_accordion_bali(){
ob_start();

echo '

<div>
    <button class="jeniswisata">Wisata Bahari</button>

    <div class ="panelkabupatenkota">
       

        <button class="kabupatenkota">Kabupaten Badung</button>
            <div class ="panelkecamatan">
                <button class="kecamatan">Kecamatan Kuta</button>
                <div class="wisata">
                    <br />
                    <p><a href="#pantai-kuta">Pantai Kuta</a></p>
                </div>
                <button class="kecamatan">Kecamatan Kuta Utara</button>
                <div class ="wisata">
                    <br />
                    <p><a href="#pantai-batu-bolong">Pantai Batu Bolong</a></p>
                </div>

                <button class="kecamatan">Kecamatan Kuta Selatan</button>
                <div class="wisata">
                    <br />
                    <p><a href="#pantai-balangan">Pantai Balangan</a></p>
                    <p><a href="#pantai-pandawa">Pantai Pandawa</a></p>
                    <p><a href="#pantai-jimbaran">Pantai Jimbaran</a></p>
                    <p><a href="#pantai-nusa-dua">Pantai Nusa Dua</a></p>
                    <p><a href="#pantai-dreamland">Pantai DreamLand</a></p>
                    <p><a href="#pantai-tanjung-benoa">Pantai Tanjung Benoa</a></p>
                </div>
            </div>
            
        <button class="kabupatenkota">Kabupaten Buleleng</button>
            <div class="panelkecamatan">
                <button class="kecamatan">Kecamatan Buleleng</button>
                <div class="wisata">
                    <br />
                    <p><a href="#pantai-lovina">Pantai Lovina</a></p>
                </div>
            </div>
        
    </div>


</div>


';

    
?>

<style>
    
       .jeniswisata {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 676px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
        }
        .kabupatenkota {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 658px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
        }

        .kecamatan{

        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 640px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;


        }
    
        .active, .jeniswisata:hover {
        background-color: #ccc; 
        }
    
        .panelkabupatenkota {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        }

        .panelkecamatan{
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        }
    
        .wisata {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        }


</style>
<script>
     var acc = document.getElementsByClassName("jeniswisata");
     var accs = document.getElementsByClassName("kabupatenkota");
     var accsn = document.getElementsByClassName("kecamatan");
     var i;

     for (i = 0; i < acc.length; i++) {
     acc[i].addEventListener("click", function() {
         this.classList.toggle("active");
         var panelkabupatenkota = this.nextElementSibling;
         if (panelkabupatenkota.style.display === "block") {
         panelkabupatenkota.style.display = "none";
         } else {
         panelkabupatenkota.style.display = "block";
         }

       });
      }
    
     for (i = 0; i < accsn.length; i++) {
     accsn[i].addEventListener("click", function() {
         this.classList.toggle("active");
         var panelkecamatan = this.nextElementSibling;
         if (panelkecamatan.style.display === "block") {
         panelkecamatan.style.display = "none";
         } else {
         panelkecamatan.style.display = "block";
         }

       });
      }
    
     for (i = 0; i < accs.length; i++) {
        accs[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var wisata = this.nextElementSibling;
            if(wisata.style.display === "block"){
            wisata.style.display = "none";
            }else{
            wisata.style.display = "block";
            }

        });
       }
    
</script>

<?php
    
return ob_get_clean();
    
    

}add_shortcode('add_shortcode_accordion_bali', 'add_shortcode_accordion_bali');

I make it shorter, my full code is very long.

question from:https://stackoverflow.com/questions/66064246/how-to-make-javascript-accordion-support-with-mobile-wordpress

Answer 1

Waitting for answers