Je souhaite ajouter un bouton bascule pour changer la langue de mon blog à l'aide d'un script de traduction Google. J'ai trouvé ce code et il fonctionne bien. J'ai trouvé ce bouton bascule, mais je ne sais pas comment les mélanger avec JavaScript pour que le code fonctionne correctement.
le code

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id='google_translate_element'> </div>
<div class='menu-traslate-header'>
 
 <ul>
 
  <li><a href='#googtrans/fr'>FR</a></li>
  <li><a href='#googtrans/ar'>Ar</a></li>
</ul>
 
</div>
 <script type='text/javascript'>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'fr',
    includedLanguages: 'ar,fr-CN' ,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    multilanguagePage: true,
    gaTrack: true,
  }, 'google_translate_element');
}
</script>
<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' type='text/javascript'/>
 <script type='text/javascript'>
jQuery(document).ready(function($) {
  $('.menu-traslate-header ul li a' ).click(function(event) {
      window.location = $(this).attr('href');
      location.reload();
  });
});
</script>
le bouton switch
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<div class="on-off-toggle">
  <input class="on-off-toggle__input" type="checkbox" id="bopis" />
  <label for="bopis" class="on-off-toggle__slider"></label>
</div>
css du bouton
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@use postcss-preset-env {
  stage: 0;
}
 
/** BEGIN CSS NEEDED FOR SWITCH **/
.on-off-toggle {
  width: 56px;
  height: 24px;
  position: relative;
  display: inline-block;
}
 
.on-off-toggle__slider {
  width: 56px;
  height: 24px;
  display: block;
  border-radius: 34px;
  background-color: #d8d8d8;
  transition: background-color 0.4s;
 
  &:before {
    content: '';
    display: block;
    background-color: #fff;
    box-shadow: 0 0 0 1px #949494;
    bottom: 3px;
    height: 18px;
    left: 3px;
    position: absolute;
    transition: .4s;
    width: 18px;
    z-index: 5;
    border-radius: 100%;
  }
 
  &:after {
    display: block;
    line-height: 24px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    content: 'fr';
    color: #484848;
    padding-left: 26px;
    transition: all 0.4s;
  }
 
}
 
.on-off-toggle__input {
  /*
    This way of hiding the default input is better
    for accessibility than using display: none;
  */
  position: absolute;
  opacity: 0;
}
 
.on-off-toggle__input:checked +
.on-off-toggle__slider {
  background-color: #000;
 
  &:before {
    transform: translateX(32px);
  }
  &:after {
    content: 'ar';
    color: #FFFFFF;
    padding-left: 8px;
  }
}
 
/*** END CSS NEEDED FOR SWITCH **/
 
 
 
/*** DEMO STYLES ONLY ***/
 
* {
  box-sizing: border-box;
}
 
body {
  font-family: OpenSans, sans-serif;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}