jquery - Toggle open both ID tags -


i'm complete noob @ jquery, came across problem. title says how can both of id tags toggle @ once, slip scorlling effect. example if click on #nav-icon3 should toggle open #nav-icon4.

stole from: http://codepen.io/designcouch/pen/atyop

   $(document).ready(function(){         $('#nav-icon3,#nav-icon4').click(function(){             $(this).toggleclass('open');         });     });

cheers, jquery noob

no, inside click handler this refers clicked element using toggle this toggle class of clicked element not of other element.

but solution, can store reference jquery object containing both elements, use register handler , toggle like

$(document).ready(function() {    var $btns = $('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function() {      $btns.toggleclass('open');    });  });
* {    margin: 0;    padding: 0;  }  /* icon 1 */    #nav-icon1,  #nav-icon2,  #nav-icon3,  #nav-icon4 {    width: 60px;    height: 45px;    position: relative;    margin: 50px auto;    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);    -o-transform: rotate(0deg);    transform: rotate(0deg);    -webkit-transition: .5s ease-in-out;    -moz-transition: .5s ease-in-out;    -o-transition: .5s ease-in-out;    transition: .5s ease-in-out;    cursor: pointer;  }  #nav-icon1 span,  #nav-icon3 span,  #nav-icon4 span {    display: block;    position: absolute;    height: 9px;    width: 100%;    background: #d3531a;    border-radius: 9px;    opacity: 1;    left: 0;    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);    -o-transform: rotate(0deg);    transform: rotate(0deg);    -webkit-transition: .25s ease-in-out;    -moz-transition: .25s ease-in-out;    -o-transition: .25s ease-in-out;    transition: .25s ease-in-out;  }  #nav-icon1 span:nth-child(1) {    top: 0px;  }  #nav-icon1 span:nth-child(2) {    top: 18px;  }  #nav-icon1 span:nth-child(3) {    top: 36px;  }  #nav-icon1.open span:nth-child(1) {    top: 18px;    -webkit-transform: rotate(135deg);    -moz-transform: rotate(135deg);    -o-transform: rotate(135deg);    transform: rotate(135deg);  }  #nav-icon1.open span:nth-child(2) {    opacity: 0;    left: -60px;  }  #nav-icon1.open span:nth-child(3) {    top: 18px;    -webkit-transform: rotate(-135deg);    -moz-transform: rotate(-135deg);    -o-transform: rotate(-135deg);    transform: rotate(-135deg);  }  /* icon 2 */    #nav-icon2 {} #nav-icon2 span {    display: block;    position: absolute;    height: 9px;    width: 50%;    background: #d3531a;    opacity: 1;    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);    -o-transform: rotate(0deg);    transform: rotate(0deg);    -webkit-transition: .25s ease-in-out;    -moz-transition: .25s ease-in-out;    -o-transition: .25s ease-in-out;    transition: .25s ease-in-out;  }  #nav-icon2 span:nth-child(even) {    left: 50%;    border-radius: 0 9px 9px 0;  }  #nav-icon2 span:nth-child(odd) {    left: 0px;    border-radius: 9px 0 0 9px;  }  #nav-icon2 span:nth-child(1),  #nav-icon2 span:nth-child(2) {    top: 0px;  }  #nav-icon2 span:nth-child(3),  #nav-icon2 span:nth-child(4) {    top: 18px;  }  #nav-icon2 span:nth-child(5),  #nav-icon2 span:nth-child(6) {    top: 36px;  }  #nav-icon2.open span:nth-child(1),  #nav-icon2.open span:nth-child(6) {    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);  }  #nav-icon2.open span:nth-child(2),  #nav-icon2.open span:nth-child(5) {    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);  }  #nav-icon2.open span:nth-child(1) {    left: 5px;    top: 7px;  }  #nav-icon2.open span:nth-child(2) {    left: calc(50% - 5px);    top: 7px;  }  #nav-icon2.open span:nth-child(3) {    left: -50%;    opacity: 0;  }  #nav-icon2.open span:nth-child(4) {    left: 100%;    opacity: 0;  }  #nav-icon2.open span:nth-child(5) {    left: 5px;    top: 29px;  }  #nav-icon2.open span:nth-child(6) {    left: calc(50% - 5px);    top: 29px;  }  /* icon 3 */    #nav-icon3 span:nth-child(1) {    top: 0px;  }  #nav-icon3 span:nth-child(2),  #nav-icon3 span:nth-child(3) {    top: 18px;  }  #nav-icon3 span:nth-child(4) {    top: 36px;  }  #nav-icon3.open span:nth-child(1) {    top: 18px;    width: 0%;    left: 50%;  }  #nav-icon3.open span:nth-child(2) {    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);  }  #nav-icon3.open span:nth-child(3) {    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);  }  #nav-icon3.open span:nth-child(4) {    top: 18px;    width: 0%;    left: 50%;  }  /* icon 4 */    #nav-icon4 {} #nav-icon4 span:nth-child(1) {    top: 0px;    -webkit-transform-origin: left center;    -moz-transform-origin: left center;    -o-transform-origin: left center;    transform-origin: left center;  }  #nav-icon4 span:nth-child(2) {    top: 18px;    -webkit-transform-origin: left center;    -moz-transform-origin: left center;    -o-transform-origin: left center;    transform-origin: left center;  }  #nav-icon4 span:nth-child(3) {    top: 36px;    -webkit-transform-origin: left center;    -moz-transform-origin: left center;    -o-transform-origin: left center;    transform-origin: left center;  }  #nav-icon4.open span:nth-child(1) {    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);    top: -3px;    left: 8px;  }  #nav-icon4.open span:nth-child(2) {    width: 0%;    opacity: 0;  }  #nav-icon4.open span:nth-child(3) {    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);    top: 39px;    left: 8px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="nav-icon1">    <span></span>    <span></span>    <span></span>  </div>  <div id="nav-icon2">    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>  </div>  <div id="nav-icon3">    <span></span>    <span></span>    <span></span>    <span></span>  </div>  <div id="nav-icon4">    <span></span>    <span></span>    <span></span>  </div>


-

Comments

Post a Comment

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

Image
in code below when try execute main.java getting exception: exception in thread "main" org.hibernate.unknownentitytypeexception: unable locate persister: com.np.vta.test.pojo.users @ org.hibernate.internal.sessionfactoryimpl.locateentitypersister(sessionfactoryimpl.java:792) @ org.hibernate.internal.sessionimpl.locateentitypersister(sessionimpl.java:2637) @ org.hibernate.internal.sessionimpl.access$2500(sessionimpl.java:164) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2575) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2562) @ org.hibernate.internal.sessionimpl.byid(sessionimpl.java:1044) @ org.hibernate.internal.sessionimpl.get(sessionimpl.java:955) @ com.app.test.main.main(main.java:20) but if uncomment cfg.addclass( users.class ).addresource( "com/np/vta/test/pojo/users.hbm.xml" ); code works fine. why not reading <mapping...
Read more

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

i'm using (for first time) scikit library , got error: valueerror: empty vocabulary; perhaps documents contain stop words file "c:\users\a605563\desktop\velibprojetpreso\traitementtwitterdico.py", line 33, in <module> x_train_counts = count_vect.fit_transform(filetweets) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 804, in fit_transform self.fixed_vocabulary_) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 751, in _count_vocab raise valueerror("empty vocabulary; perhaps documents contain stop words but don't understand why that's happening. import sklearn sklearn.feature_extraction.text import countvectorizer import pandas pd import numpy import unicodedata import nltk tweetsfile = open('tweets2015-08-13.csv', 'r+') f2 = open('analyzer.txt', 'a') print tweetsfile.readline() count_vect = countvectorizer(strip_accents='ascii...
Read more

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -

Image
i'm trying build precimonious on ubuntu 16.04.3 x64. allocated 1gb memory it. file structure looks like ~ |--- llvm/ |--- precimonious/ where llvm on version 3.0 mentioned @ https://github.com/corvette-berkeley/precimonious#requirement . followed steps on readme command make ended with ... llvm[1]: linking debug shared library libllvm-3.0.so collect2: fatal error: ld terminated signal 9 [killed] compilation terminated. ... i went through answers online , might because there's not enough memory perform link. memory usage the gcc version on machine gcc version 5.4.0 20160609 (ubuntu 5.4.0-6ubuntu1~16.04.4) , installed via apt-get install build-essential . fresh droplet created on digitalocean btw. appreciated. it memory exhaustion. sampling interval memory measurement not small enough covers exact point oom killer kicks in. depending on container/vm technology, may able set vm.overcommit_memory=2 before build, process not killed (but doing requires m...
Read more