javascript - stop div from reopening on click jQuery -
i new jquery/javascript , think don't understand own code.
it behaves want when re-click on .projtog
, re-toggles .projcontent
, don't want that. .projcontent
close when re-click on associated .projtog
. tried giving .projcontent boolean value, didn't know it.
here code:
$('div.projcontent').css('height', '0vh'); $('h2.projtog').click(function() { var $dataname_2 = $(this).data("name"); $('div.projcontent').css('height', '0vh'); settimeout(function() { $("#" + $dataname_2).css('height', '100vh'); }, 290); });
#projectsection { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1em; padding-top: 0; width: 45vw; min-height: 100%; overflow-y: scroll; overflow-x: hidden; } .proj { max-width: 40vw; color: #003c48; max-height: 100vh; } .projtog { text-align: left; transition: 0.2s ease; } .projcontent { max-width: 40vw; max-height: 57vh; overflow: scroll; transition: ease-in-out 200ms; position: relative; } .projectimages { max-width: 40vw; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="proj"> <h2 data-name="projectx" class="projtog"></h2> <h3></h3> <div class="projcontent" id="projectx"> <p></p> <img class="projectimages" src=""> </div> </div>
$('div.projcontent').hide(); $('h2.projtog').click(function() { $(this).nextall(".projcontent").toggle(); });
above code toggle projcontent
div.
Comments
Post a Comment