Cambiare il css di una pagina con tasto "on off"

[Koboshi]

Ciau a tutti! Eccomi pronta col mio primo quesito! Spero di non aver sbagliato sezione..
Ho bisogno di cambiare il css di un div al click di un tasto toggle switch. In sostanza il tasto deve determinare se il contenuto del div sia "attivo" o meno quindi dovrebbe essere tutto normale in modalità "on" mentre dovrebbe essere velato di grigio in modalità "off". Il fatto è che non ho idea di come farlo in modo funzionale. Qualcuno di voi saprebbe aiutarmi? Ringrazio tutti mille volte in anticipo.

 

[Max 1]

Hai provato con JS
Esempio

onclick="document.getElementById('id').style.......

 

[Koboshi]

Ho provato ma con jQuery e funziona solo che sono riuscita a farlo funzionare solo da off (che è lo stato iniziale) a on e non riesco a fare l'inverso. Devo spostare la discussione in un'altra sessione?

 

[marlev]

Ciao, ti riporto qui la soluzione. Se ha bisogno di chiarimento chiedi pure

 <style>
                .on{background-color: #fff;}
                .off{background-color: #ccc;}
 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
            jQuery(document).ready(function(){
                jQuery("#tasto").click(function(){
                    if(jQuery("#mydiv").hasClass("on")){
                        jQuery("#mydiv").removeClass("on").addClass("off");
                    }
                    else {
                         jQuery("#mydiv").removeClass("off").addClass("on");
                    }
                });
            });
  </script>

            <button id="tasto" type="button">Tasto</button>
            <div id="mydiv" class="off">Contenuto div</div>

 

[marino51]

nella "cassetta degli attrezzi" ho trovato questa soluzione che mi sembra carina ….

<script>
$(document).ready(function () {
    $("#bottone").click(function () {
        $("#box").toggle("slow", function () {
            if ($(this).is(':visible')) {
                $("#bottone").val("Nascondi");
            } else {
                $("#bottone").val("Mostra");
            }
        });
    });
});
</script>

<div id="box">
Io scompaio e appaio!
<img src="input_type.png" width="220" eight="69" />
</div>
<input id="bottone" type="button" value="Nascondi" />

 

[Koboshi]

Ce l'ho fatta! Grazie mille ragazzi <3