javascript - 6 Grid DIVs with 2 Content DIVs each and toggle-Function -
ok, might not seeing wood trees - here's (probably solveable) problem:
i have markup (6x times "col-4"-div content):
<div class="partner inner"> <div class="col-4"> <div class="logo" id="logo-one"></div> <div class="caption hidden"> <h3>company one</h3> <address> addressinfo here... </address> </div> </div> </div>
css situation: each id class "logo" has background-image switches background-position vertically on hover. class caption hidden on default through helper-class "hidden"
what want achieve: using jquery toggle class "hidden" clicked logo. using jquery toggle div "caption" show addressinfo each company.
my problem jquery code:
$(".logo").click(function(){ $(".hidden").toggle(500); $(this).toggleclass("hidden"); });
is logos disappear , clicked addressinfo shown.
how can achieve logo clicked disappears , addressinfo behind clicked-logo shown?
i'm missing easy step don't want write 6 click-functions each id - messy , not right way right?
the problem you're targeting elements class .hidden
. need target .hidden
element related logo you've clicked. since .logo
, .hidden
siblings can :
$(this).siblings('.hidden').toggle(500);
Comments
Post a Comment