Expand Section Java not working on Chrome but works on Explorer

123
February 03, 2022, at 1:10 PM

So I've been trying to find the reason that whenever I click on one of these tabs on Google Chrome or Edge, it doesn't do anything.

Usually what it does on IE is that the category expands and you get other options and you choose one and the JS code does the rest by filling out the other boxes with text. As you can see below(I've hidden the text).

Here is the code of the html file for the Auto tab:

 <div class="w3-row-padding" id="about">
<div class="w3-quarter w3-center" id="categories">      
    <a href="#" class="cat-qms-expand" id="expand-cat1">
        <h2 class="notecategorytab" id="catTabAuto">Automobile</h2>
    </a>
    <div id="category-qms-cat1" class="w3-card-4" style="display: none;">
        <div class="w3-half divlist">
            <p>Catégorie</p>
            <a href="#" class="notecatcheck" id="catauto1">Collision</a>
            <a href="#" class="notecatcheck" id="catauto2">Vol</a>
            <a href="#" class="notecatcheck" id="catauto3">Vandalisme</a>
            <a href="#" class="notecatcheck" id="catauto4">Incendie</a>
            <!--<a href="#" class="notecatcheck" id="catauto5">Envoi courriel - Estimation numérique</a> -->
        </div>
        <div class="w3-half divlist">
            <p>Complément</p>               
            <a href="#" class="notecompcheck" id="compauto1">Non Carrossable</a>
            <a href="#" class="notecompcheck" id="compauto2">Estimation - Routier</a>
            <a href="#" class="notecompcheck" id="compauto3">Estimation - Garage</a>
            <a href="#" class="notecompcheck" id="compauto4">Location</a>
        </div>
    </div>
    <a href="#" class="cat-qms-expand" id="expand-cat2">
        <h2 class="notecategorytab" id="catTabHabit">Habitation</h2>
    </a>

Then it continues for the other tabs..

The JS script for the expand function is :

$(document).ready(function(){
    $(".cat-qms-expand").click(function(){
        var id = $(this).attr("id");
        var name = id.split("-")[1];
        $("div[id^='category-qms-']").each(function() {
            if($(this).is(":visible") && $(this).attr("id") != "category-qms-" + name){
                $(this).toggle(400);
            }
        });
        $("#category-qms-" + name).toggle(400);
    });
});

Thank you.

Rent Charter Buses Company
READ ALSO
How can I fix rectangle going to left down corner when dragged?

How can I fix rectangle going to left down corner when dragged?

I'm making a pvp client for a game called Minecraft (minecraft coder pack) and I'm having trouble with ClickGUI, a feature that allows you to enable other features in a window that appears in the middle of the screenI have a problem that when I drag a rectangle,...

104
routing error Cannot Get /api/name student activity

routing error Cannot Get /api/name student activity

I am trying to recreate a Note Taking App using ExpressMy code follows the instructor's example but when I deploy it and try to add a new note I get the error cannot get/api/name

103
Send Json file for Async Validation

Send Json file for Async Validation

I am working with Angular reactive forms and async validation and instead of a normal value I want to send Json file for validation

132