jQuery Girl
  1. jQuery Girl
  3. Révéler cacher bascule autre div jquery
Intereting Posts
Extension de XHTML Le message de validation requirejs pour la zone de texte angular 2 rest affiché même après la saisie de la valeur Vous avez un problème avec jQuery Countdown? Fonction serverSync: serverTime jQuery sur l’événement ‘double clic’ (dblclick for mobile) Arrêter la propagation à l’élément ajouté Analyser tout le document HTML d’une chaîne dans jQuery Javascript: Modifier img src après un intervalle de temps Conception des données dans $ .ajax pour correspondre à la définition du modèle côté serveur L’atsortingbut «data» de jQuery ne valide pas le W3C Bootstrap 4: Contrôlez plusieurs panneaux d’tabs avec un seul onglet de navigation Plus grande surface pour survoler plusieurs petits cercles Soumission de formulaire jQuery. L’arrêt de l’actualisation de la page ne fonctionne que sur les navigateurs les plus récents Cliquez sur td, sélectionnez le bouton radio dans jQuery Comment combiner le dialog d’interface utilisateur avec les tabs d’interface utilisateur dans jQuery? Y a-t-il un avantage en termes de performances à utiliser la délégation d’événements JavaScript plutôt que celle de jQuery?

Révéler cacher bascule autre div jquery

J’ai 2 liens qui les deux révèlent différentes divs. Je l’ai glissé bascule tout va bien. Mais ce dont j’ai besoin, c’est d’effondrer la bascule opposée (si elle est ouverte). Semblable à la façon dont fonctionne un panneau accordéon (lorsque vous déclenchez un lien de révélation, le panneau ouvert se ferme et le panneau nouvellement déclenché s’ouvre).

Voici le jQuery que j’utilise actuellement 

//Left reveal toggle $(".left-reveal-toggle").on("click", function () { $('.left-reveal-section').slideToggle("slow"); $(".left-reveal-toggle").toggleClass("active"); }); //Right reveal toggle $(".right-reveal-toggle").on("click", function () { $('.right-reveal-section').slideToggle("slow"); $(".right-reveal-toggle").toggleClass("active"); });

Voici un lien JSFiddle fonctionnel: http://jsfiddle.net/wq73aeuh/1/ 

 //Left reveal toggle $(".left-reveal-toggle").on("click", function() { $('.left-reveal-section').slideToggle("slow"); $(".left-reveal-toggle").toggleClass("active"); }); //Right reveal toggle $(".right-reveal-toggle").on("click", function() { $('.right-reveal-section').slideToggle("slow"); $(".right-reveal-toggle").toggleClass("active"); }); 
 .left-panel { min-height: 400px; background: #31b9ce; width: 50%; float: left; text-align: center; } .right-panel { min-height: 400px; background: #4f5cd6; width: 50%; float: left; text-align: center; } .left-panel-reveal { min-height: 400px; background: #31b9ce; width: 50%; float: left; text-align: center; } .right-panel-reveal { min-height: 400px; background: #4f5cd6; width: 50%; float: left; text-align: center; } .hide { display: none; } .clear { clear: both; font-size: 0px; line-height: 0px; display: block; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, ssortingke, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } 
  
 Read more form left panel 
 
 Read more from right panel 
 
 
 
left panel reveal content
 
left panel reveal content
 
 
 
right panel reveal content
 
right panel reveal content