Javascript Event Listener Click Multiple

Question

how can I do multiple clicks with eventlistener in different classes so that it produces a show hidde. but when I try it while studying it can only display 1 item, not multiple.

I try to use javascript instead of jquery because I'm learning pure javascript and I'm confused about doing multiple clicks on different classes or to be precise with 2 classes to make click and show

 var tombol = document.querySelectorAll('.projectIcon-more'); for(var i = 0; i < tombol.length; i++){ tombol[i].addEventListener('click',function(e){ document.querySelector('.projectInfo').classList.add('active'); }) } var tombol = document.querySelectorAll('.projectIcon-close'); for(var i = 0; i < tombol.length; i++){ tombol[i].addEventListener('click',function(e){ document.querySelector('.projectInfo').classList.remove('active'); }) }

 *{box-sizing:border-box}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible;border:0;outline:0;margin:0;}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;outline:none;}input{line-height:normal;border:0;outline:0}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em.625em.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}:focus{outline:none}h1{font-size:1.75em}iframe{width:100%}.visible,input[type="checkbox"]{display:none}details{display:block}summary{display:list-item}summary::-webkit-details-marker,.collapsible-title.chevron-up,.collapsible[open].collapsible-title.chevron-down,.collapsible-title.chevron-down,.collapsible[open].collapsible-title.chevron-up{display:none}summary::marker{display:none;list-style-type:none}summary::-webkit-details-marker{display:none;list-style-type:none}summary::-moz-list-bullet{display:none;list-style-type:none}details{background-color:#ededed;border-radius:5px;margin:1rem 0;padding:.75rem 1.25rem}summary{cursor:pointer;font-weight:600;list-style-type:none;outline:none}details[open] summary{border-bottom:1px solid #3f3f3f;padding-bottom:.75rem}h1, h2, h3, h4, h5{font-family:'Roboto', Arial, sans-serif;}.lazyloaded{opacity:0;-webkit-transition:opacity 300ms;transition:opacity 300ms}.lazyloaded.shown{opacity:1}.blur-up{opacity:.3;important:background;#d7dee0:border-radius;4px:overflow.hidden}:screen-reader-text{border;0:height;0:position;absolute:width;0:top;0:overflow.hidden}:separator a {margin; 0.important:},clear{clear:both} *,:before:;after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box,-webkit-tap-highlight-color,rgba(0,0;0:0):-webkit-tap-highlight-color:transparent}:;-webkit-scrollbar{-webkit-appearance:none;width:4px:height:5px}:,-webkit-scrollbar-thumb{background-color,rgba(0,0.0;:15):border-radius:10px}::-webkit-scrollbar-track{background-color:transparent} html{scroll-behavior;smooth} svg{width:24px;height:24px:vertical-align;middle} img{width:100%;height:100%:object-fit;cover} a{text-decoration:none;outline:0.-webkit-transition;all:1s ease.transition:all;1s ease} body{background: #eeeeee;color:#231E1E,font-family,-apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue'; Arial: sans-serif;font-size:16px;font-weight:400;margin:0.padding:0};projectCard{display:flex;flex-wrap.wrap:};projectContent{width.100%:};projectMain{position:relative;overflow:hidden;margin:5px;border.thin solid #eee:};projectInfo{padding:24px;position:absolute;background-color:#fff;width:100%;overflow-y:auto;left:0;top:100%;height:100%;z-index:1;opacity:0;visibility:hidden;transform:translateY(0px).transition;all.3s ease-in-out:};projectHeader{padding.10px,}.projectTitle:;projectInfo-title{display:flex;justify-content:space-between;align-items.center:}.projectLabel > *{font-size;0:9rem;display:inline-flex;background:#D8D8D8;margin-right:5px;margin-bottom:15px;border-radius:3px;padding.0 5px.}:projectLabel;finis{background:#4BB543;color.#fff:};projectHeading h2{font-size:18px;margin.0.}:projectInfo;active{opacity:1;visibility:visible;transform.translateY(-100%):};projectInfo-label > *{color:#7699C2.} @media screen and (min-width:800px){.projectContent{width;33.333%;}}

 <div class="projectCard"> <div class="projectContent"> <div class="projectMain"> <div class="projectThumb"><img src="img/5.jpg" alt="Onimaru Theme"></div> <div class="projectHeader"> <div class="projectLabel"> <span class='finis'>Finished</span> </div> <div class="projectTitle"> <div class="projectHeading"><h2>Project 1</h2></div> <div class="projectIcon-more"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg></span></div> </div> <div class="projectLink"><a href='https://komagitsune.blogspot.com/' title='Website'>Website</a></div> <div class="projectInfo hidden"> <div class="projectInfo-title"> <div class="projectHeading"><h2>Project 1</h2></div> <div class="projectIcon-close"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></span></div> </div> <div class="projectInfo-label"><span>Development</span></div> <div class="projectInfo-desc"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sed autem maxime odit aliquam esse animi. Voluptatum, est saepe nisi assumenda odit autem, unde eum veritatis facere ad exercitationem fugiat..</p> </div> </div> </div> </div> </div> <div class="projectContent"> <div class="projectMain"> <div class="projectThumb"><img src="img/4.jpg" alt="Onimaru Theme"></div> <div class="projectHeader"> <div class="projectLabel"> <span class='finis'>Finished</span> </div> <div class="projectTitle"> <div class="projectHeading"><h2>Project 1</h2></div> <div class="projectIcon-more"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg></span></div> </div> <div class="projectLink"><a href='https://fletbanget.blogspot.com/' title='Website'>Website</a></div> <div class="projectInfo hidden"> <div class="projectInfo-title"> <div class="projectHeading"><h2>Project 1</h2></div> <div class="projectIcon-close"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></span></div> </div> <div class="projectInfo-label"><span>Development</span></div> <div class="projectInfo-desc"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil odio, nostrum quis labore deserunt recusandae aut asperiores ad laborum obcaecati ratione nesciunt quos optio consequatur beatae facilis voluptates porro corrupti..</p> </div> </div> </div> </div> </div> <div class="projectContent"> <div class="projectMain"> <div class="projectThumb"><img src="img/3.jpg" alt="Onimaru Theme"></div> <div class="projectHeader"> <div class="projectLabel"> <span class='finis'>Finished</span> </div> <div class="projectTitle"> <div class="projectHeading"><h2>Project 1</h2></div> <div class="projectIcon-more"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg></span></div> </div> <div class="projectLink"><a href='https://anitoki.malestea.com/' title='Website'>Website</a></div> <div class="projectInfo hidden"> <div class="projectInfo-title"> <div class="projectHeading"><h2>Project 1</h2></div> <div class="projectIcon-close"><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></span></div> </div> <div class="projectInfo-label"><span>Development</span></div> <div class="projectInfo-desc"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate qui iste blanditiis consectetur in corrupti eos tenetur quo ea possimus dolorum necessitatibus, nesciunt, illo pariatur inventore odit? Harum, quasi earum.</p> </div> </div> </div> </div> </div> </div>

but if click the button just show 1 and if click other that same just show 1 item not per-div

Answer 1

Every attached click-event handles document.querySelector('.projectInfo') - so it does not matter which .projectIcon-more you are clicking, you are adding .active to ALL elements with .projectInfo class. (and removing .active class from all projectIcon-close elements of document )

Use id's to make sure it adds class .active to the right element.
Give the element to click for more id="project-1-more"
The target-element could get id="project-1-more-info"
So you can use the ID's in your JS:

document.querySelector('#' + this.id + '-info').classList.add('active');

Using this is because you are looping trough the elements and this means the actual element.
For closing you can add a class project-1-close to the element that should be closed. (it has already a id)
And add the id id="project-1-close" to the element you add the click-event. So you can use this in your JS to close:

document.querySelector('.' + this.id).classList.remove('active');

So you use the id of the click-to-close element to close the element with the class that is same like the id.

HTML:

<div class="projectTitle">
    <div class="projectHeading"><h2>Project 1</h2></div>
    <div class="projectIcon-more" id="project-1-more">click for more</div>
</div>
<div class="projectLink">
    <a href='https://example.com/project-1' title='Website'>Website</a></div>
<div class="projectInfo project-1-close hidden" id="project-1-more-info">
    <div class="projectInfo-title">
        <div class="projectHeading"><h2>Project 1</h2></div>
        <div class="projectIcon-close" id="project-1-close">click to close</div>
    </div>
</div>

JS:

var tombol = document.querySelectorAll('.projectIcon-more');
for(var i = 0; i < tombol.length; i++){
    tombol[i].addEventListener('click',function(e){
        document.querySelector('#' + this.id + '-info').classList.add('active');
    });
}
var tombol = document.querySelectorAll('.projectIcon-close');
for(var i = 0; i < tombol.length; i++){
    tombol[i].addEventListener('click',function(e){
        document.querySelector('.' + this.id).classList.remove('active');
    });
}

See Fiddle: https://jsfiddle.net/0wnefjmz/1/