Return to Answer

deleted 394 characters in body

edited Jun 23, 2020 at 3:17

Add class everyone to everyone btn and replace sort-hold member to class name instead of id

Fix #member to be .member

#sort-box { width: 100%; } #button-wrap { width: 100%; display: flex; } .sort-button { flex: 1; margin-right: 10px; width: 100%; display: block; border: none; background: #eee; outline: none; border-radius: none; height: 40px; resize: none; text-align: center; font-family: arial; font-size: 10px; line-height: 40px; text-transform: uppercase; } .active, .sort-button:hover { background: #fde676; } #search { margin-right: 0px; text-align: left; padding: 0px 10px; flex: 1.5; } .sort-hold { width: 100%; background: #eee; margin-top: 10px; padding: 5px 0px; } .member { margin: 10px; width: calc(100% - 70px); height: 50px; line-height: 50px; padding: 0px 25px; text-transform: uppercase; font-family: arial; background: #fff; font-size: 10px; outline: 1px solid #ddd; outline-offset: -1px; }

// Get the container element var btnWrap = document.getElementById("button-wrap"); // Get all buttons with class="btn" inside the container var btns = btnWrap.getElementsByClassName("sort-button"); // Loop through the buttons and add the active class to the current/clicked button for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } $("#everyone").click(sortEveryone); function sortEveryone() { console.log("button clicked!") $(".member").show(); } // add activeBtn function for all btns except .everyone for (var btn of btns) { $(btn).hasClass("everyone") == false ? btn.addEventListener("click", activeBtn) : ""; } function activeBtn(e) {   let targetId = e.target.id; let members = $(".member");    // if the member class has the same name as the btn id, show it else hide it for (var member of members) { $(member).hasClass(targetId) ? $(member).show() : $(member).hide(); } }

And I have addadded .everyone for everyone btn to make it more easier to handelhandle.

#sort-box { width: 100%; } #button-wrap { width: 100%; display: flex; } .sort-button { flex: 1; margin-right: 10px; width: 100%; display: block; border: none; background: #eee; outline: none; border-radius: none; height: 40px; resize: none; text-align: center; font-family: arial; font-size: 10px; line-height: 40px; text-transform: uppercase; } .active, .sort-button:hover { background: #fde676; } #search { margin-right: 0px; text-align: left; padding: 0px 10px; flex: 1.5; } .sort-hold { width: 100%; background: #eee; margin-top: 10px; padding: 5px 0px; } .member { margin: 10px; width: calc(100% - 70px); height: 50px; line-height: 50px; padding: 0px 25px; text-transform: uppercase; font-family: arial; background: #fff; font-size: 10px; outline: 1px solid #ddd; outline-offset: -1px; }

// Get the container element var btnWrap = document.getElementById("button-wrap"); // Get all buttons with class="btn" inside the container var btns = btnWrap.getElementsByClassName("sort-button"); // Loop through the buttons and add the active class to the current/clicked button for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } $("#everyone").click(sortEveryone); function sortEveryone() { console.log("button clicked!") $(".member").show(); } for (var btn of btns) { $(btn).hasClass("everyone") == false ? btn.addEventListener("click", activeBtn) : ""; } function activeBtn(e) {   let targetId = e.target.id; let members = $(".member"); for (var member of members) { $(member).hasClass(targetId) ? $(member).show() : $(member).hide(); } }

And I have add .everyone for everyone btn to make it more easier to handel.

Add class everyone to everyone btn and replace sort-hold member to class name instead of id

Fix #member to be .member

.member { margin: 10px; width: calc(100% - 70px); height: 50px; line-height: 50px; padding: 0px 25px; text-transform: uppercase; font-family: arial; background: #fff; font-size: 10px; outline: 1px solid #ddd; outline-offset: -1px; }

// Get the container element var btnWrap = document.getElementById("button-wrap"); // Get all buttons with class="btn" inside the container var btns = btnWrap.getElementsByClassName("sort-button"); // Loop through the buttons and add the active class to the current/clicked button for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } $("#everyone").click(sortEveryone); function sortEveryone() { console.log("button clicked!") $(".member").show(); } // add activeBtn function for all btns except .everyone for (var btn of btns) { $(btn).hasClass("everyone") == false ? btn.addEventListener("click", activeBtn) : ""; } function activeBtn(e) { let targetId = e.target.id; let members = $(".member");    // if the member class has the same name as the btn id, show it else hide it for (var member of members) { $(member).hasClass(targetId) ? $(member).show() : $(member).hide(); } }

And I have added .everyone for everyone btn to make it more easier to handle.

Source Link

answered Jun 23, 2020 at 3:10

Budi Salah

Here is my solution.

<div id="sort-box"><div id="button-wrap"> <button id="everyone" class="sort-button everyone active">everyone</button> <button id="lions" class="sort-button">lions</button> <button id="tigers" class="sort-button">tigers</button> <button id="bears" class="sort-button">bears</button> <textarea id="search" class="sort-button" placeholder="search"></textarea></div> <div class="sort-hold"> <div class="lions all member">member name - lion</div> <div class="tigers all member">member name - tiger</div> <div class="bears all member">member name - bear</div> </div> </div> <script type="text/javascript" src="https://files.jcink.net/uploads2/colourcoded/jquery.js"></script> <script type="text/javascript" src="https://files.jcink.net/uploads2/colourcoded/jquery_ui.js"></script>

#sort-box { width: 100%; } #button-wrap { width: 100%; display: flex; } .sort-button { flex: 1; margin-right: 10px; width: 100%; display: block; border: none; background: #eee; outline: none; border-radius: none; height: 40px; resize: none; text-align: center; font-family: arial; font-size: 10px; line-height: 40px; text-transform: uppercase; } .active, .sort-button:hover { background: #fde676; } #search { margin-right: 0px; text-align: left; padding: 0px 10px; flex: 1.5; } .sort-hold { width: 100%; background: #eee; margin-top: 10px; padding: 5px 0px; } .member { margin: 10px; width: calc(100% - 70px); height: 50px; line-height: 50px; padding: 0px 25px; text-transform: uppercase; font-family: arial; background: #fff; font-size: 10px; outline: 1px solid #ddd; outline-offset: -1px; }

// Get the container element var btnWrap = document.getElementById("button-wrap"); // Get all buttons with class="btn" inside the container var btns = btnWrap.getElementsByClassName("sort-button"); // Loop through the buttons and add the active class to the current/clicked button for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } $("#everyone").click(sortEveryone); function sortEveryone() { console.log("button clicked!") $(".member").show(); } for (var btn of btns) { $(btn).hasClass("everyone") == false ? btn.addEventListener("click", activeBtn) : ""; } function activeBtn(e) { let targetId = e.target.id; let members = $(".member"); for (var member of members) { $(member).hasClass(targetId) ? $(member).show() : $(member).hide(); } }

I have changed the #member to .member, It's not a good approach to have more than one element with the same id.

And I have add .everyone for everyone btn to make it more easier to handel.

Collectives™ on Stack Overflow

Return to Answer