CSS Switch toggle animation do not work when i make it appear or disappear content

Question

I've got a problem. I use a pure css switch toggle button. here is its code :

    .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius:50%;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

.checkbox:checked + .switch::after {
  left : 20px;
}
.checkbox:checked + .switch {
  background-color: #7983ff;
}
.checkbox {
  display : none;
}

For the HTML part

<input type="checkbox" id="toggle" class="checkbox"/><label for="toggle" class="switch"></label>

and for the div I want to hide unhide

<div id="slideMe">
<p style="text-align: center;"><strong>Accès directs</strong></p>

<ul>
    <li style="text-align: left;"><a href="#mavilledansmapoche2">Ma Ville dans ma poche</a></li>
    <li style="text-align: left;"><a href="#lecontexteenchiffre">Le contexte en chiffres</a></li>
    <li style="text-align: left;"><a href="#moncentreshoppingpourquipourquoi">MCS, pour qui et pourquoi ?</a></li>
    <li style="text-align: left;"><a href="#questcequemoncentreshopping">Qu'est-ce que MonCentreShopping ?</a></li>
    <li style="text-align: left;"><a href="#commentfonctionnemoncentreshopping">Comment fonctionne MCS ?</a></li>
    <li style="text-align: left;"><a href="#combiencoutemoncentreshopping">Combien coûte MCS ?</a></li>
    <li style="text-align: left;"><a href="#lesoffresmoncentreshoppingendetail">Les offres MCS en détail</a></li>
    <li style="text-align: left;"><a href="#nouscontacter">Nous contacter</a></li>
</ul>
</div>

It works perfectly, when it doen't make any action. But I want to use it to make it appearring content in a div with id #slideMe. So i use a jQuery function :

jQuery(document).ready(function() {
    jQuery('#slideMe').show();
    jQuery('#toggle').click(function() {
        jQuery('#slideMe').slideToggle('slow');
        return false;
    });
});

The content is well hidden and unhidden when i click on the switch, but the animation of my toggle switch doesn't work anymore. Of course if delete my jQuery, the togle switch animation works fine.

Any idea of what happen ?

Thanks you all so much

You should edit the question and put the HTML code :) . What is #slideMe and #checkicheck? Also what is the animation you mean here "animation of my toggle switch doesn't work anymore" ? — Αntonis Papadakis, Nov 24 '19 at 12:55
Hi, #slideMe is the id of the div i want to hide and unhide by clicking #toggle. #Checkicheck was a test i change it on my post by the correct id, sorry for that. For the animation, i mean that if my toggle switch has no action except sliding its cursor from left to right it works, if i add an action like making appear or disappear content, the content hide/unhied action works but the sliding cursor inside my switch doesn't move anymore. You can see it there : https://moncentreshopping.com/infos-pros-et-collectivites/ — Thomas, Nov 24 '19 at 14:04
I've added the HTML and other contents in my question. Sorry for that. thanks a lot for your replies — Thomas, Nov 24 '19 at 14:16

score 0 · Accepted Answer · answered Nov 24 '19 at 16:42

Remove the return false; inside your function, it's not needed. Use this statement when you want to stop the execution of the function or when you need to cancel an event, for example when submitting a form and the validation fails.

You can read more about it on this question.

CSS Switch toggle animation do not work when i make it appear or disappear content

1 Answers1