javascript - Individual detail buttons and global detail button -


i'm trying hide , show details in infographic clicking on button directly in info-graphic. theres 3 buttons want individualy show there content. @ same time have detail button should show , hide of details.

here's code far.

<div class="item" style="background: #eeeeef;">     <div class="it-con alltag-con">         <div class="einlagen-con-neu">             <div class="ein-con-rel">                 <img class="einlage-neu" src="<?php bloginfo('stylesheet_directory'); ?>/img/einlagen-ip/alltag-ip-min.png" />                 <div class="detail-1-alltag detail-inf">                     <div class="detail-inf-con hide-ein">                         <h5>pelotte</h5>                         <span class="line-karo"></span>                         <p>stimuliert die muskulatur                             <br> und entlastet gleichzeitig                             <br> die achillessehne</p>                         <span class="caro-einlage"></span>                     </div>                 </div>                 <div class="detail-2-alltag detail-inf">                     <div class="detail-inf-con hide-ein">                         <h5>detorsionskern</h5>                         <span class="line-karo"></span>                         <p>stärkt den mittelfußbereich                             <br> und bietet statische                             <br> korrektur                         </p>                         <span class="caro-einlage"></span>                     </div>                 </div>                 <div class="detail-3-alltag detail-inf">                     <div class="detail-inf-con hide-ein">                         <h5>fersenschale</h5>                         <span class="line-karo"></span>                         <p>umfasst die ferse sanft                             <br> und führt den fuß optimal                         </p>                         <span class="caro-einlage"></span>                     </div>                 </div>             </div>         </div>         <div class="mess-text">             <span class="x-btn">&#10005;<br></span>             <span class="ei-btn"><span class="karo"></span>info             </span>             <h4><?php the_field('ueberschrift_einlagen', 102); ?></h4>             <br>             <p>                 <?php the_field( 'texte_einlagen', 102); ?>             </p>             <span class="ei-btn-s"><span class="karo"></span> infos</span>         </div>         <div class="toggle">             <div class="det-btn"><span class="karo"></span> detail</div>             <div class="inf-btn">info</div>         </div>     </div> </div> 

my jquery

$(".caro-einlage").click(function(e) {     //e.preventdefault();     $(this).parent(".detail-inf-con").toggleclass("hide-ein");     //$(this).prev(".state-1").toggleclass("hide"); });  $(".alltag-con .det-btn").click(function(e) {     //e.preventdefault();     $(".alltag-con .detail-inf-con").toggleclass("hide-ein");     //$(this).prev(".state-1").toggleclass("hide"); }); 

here's jsfiddler. https://jsfiddle.net/jaykray/sxk5e5a4/1/

help apreciated.

: )


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -