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">✕<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
Post a Comment