We Keep Coding

document.getElementById with multiple buttons

I have six buttons and I want to have all in one function. For each button is a different div available and if I click for example the third button, then should pop up the div for the third button.
javascript:
function kfunc(){
var x = document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6")
x.style.display = 'block';
x;
}
function closefunc(){
document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6").style.display = 'none';
}
function testfunc(){
alert("test");
}
HTML:
<button id="btn1" onclick="kfunc()">Küche</button>
<button id="btn2" onclick="kfunc()">Bad</button>
<button id="btn3" onclick="kfunc()">Wohnzimmer</button>
<button id="btn4" onclick="kfunc()">Melina</button>
<button id="btn5" onclick="kfunc()">Kleines Bad</button>
<button id="btn6" onclick="kfunc()">Schlafzimmer</button>
<!-- Küche -->
<div class="frame_kueche" id="id1">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">ab</button>
</div>
<!-- Bad -->
<div class="frame_bad" id="id2">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Wohnzimmer -->
<div class="frame_wohnzimmer" id="id3">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Melina -->
<div class="frame_melina" id="id4">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- kleines Bad -->
<div class="frame_kleines_bad" id="id5">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Schlafzimmer -->
<div class="frame_schlafzimmer" id="id6">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
It works almost! Logically when there is id1 available, it will use id1 and not the others. How can I fix it? Like I said: When btn3 is clicked then the div with id3 should show up but it always shows id1.

Look at your javascript. Actually you don't need to set id attribute for your buttons.
Just add your frame id as parameter to kfunc and closefunc function. Like this:
function kfunc(id) {
console.log(id)
document.getElementById(id).style.display = 'block'
}
function closefunc(id) {
console.log(id)
document.getElementById(id).style.display = 'none'
}
Usage:
onclick="kfunc('id1')"
onclick="closefunc('id1')"
Note: My solution is not tested. Hope you get the idea.

If you change your html to include a data attribute in the buttons, and to also pass 'this' in your onClick function call
<button id="btn1" data-div="id1" onclick="kfunc(this)">Küche</button>
<button id="btn2" data-div="id2" onclick="kfunc(this)">Bad</button>
And then in your function you can check which button was pressed, and display the appropriate div.
function kfunc(thispass) {
let fish = thispass.getAttribute('data-div');
document.getElementById(fish).style.display = 'block';
}
As for the close button. If you give all of the divs a common class, you can hide them all at once.

You can't use getElementById like this. you should use getElementByClassName or you can use the code below:
function kfunc(id){
var btn = id;
document.getElementById(id).style.display = 'block';
}
function closefunc(id){
var selectedDiv = id;
document.getElementById(id).style.display = 'none';
}
function testfunc(){
alert("test");
}
div[class^= "frame"]{
display: none;
}
<button id="btn1" onclick="kfunc('id1')">Küche</button>
<button id="btn2" onclick="kfunc('id2')">Bad</button>
<button id="btn3" onclick="kfunc('id3')">Wohnzimmer</button>
<button id="btn4" onclick="kfunc('id4')">Melina</button>
<button id="btn5" onclick="kfunc('id5')">Kleines Bad</button>
<button id="btn6" onclick="kfunc('id6')">Schlafzimmer</button>
<!-- Küche -->
<div class="frame_kueche" id="id1">
<div class="buttons_close">
<button onclick="closefunc('id1')">X</button>
</div>
<button onclick="testfunc()">ab</button>
</div>
<!-- Bad -->
<div class="frame_bad" id="id2">
<div class="buttons_close">
<button onclick="closefunc('id2')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Wohnzimmer -->
<div class="frame_wohnzimmer" id="id3">
<div class="buttons_close">
<button onclick="closefunc('id3')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Melina -->
<div class="frame_melina" id="id4">
<div class="buttons_close">
<button onclick="closefunc('id4')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- kleines Bad -->
<div class="frame_kleines_bad" id="id5">
<div class="buttons_close">
<button onclick="closefunc('id5')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Schlafzimmer -->
<div class="frame_schlafzimmer" id="id6">
<div class="buttons_close">
<button onclick="closefunc('id6')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>

Toggle div tag on button click

I have many buttons with id b1, b2 ... and each has a div tag after it with id q1, q2...
I want to toggle the div tag when the corresponding button is clicked. Example: When b1 is clicked q1 should toggle.
It is given here. http://upscfever.com/upsc-fever/en/topper/en-toppers.html
$(document).ready(function(){
$(".info").hide();
$("#b1").click(function(){
$("#q1").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block"></button>
<div id="q1" class="info"></div>
But as i might have 100 of buttons, how can i do the same thing without adding click on each button?

Using attribute startswith selector ^, get the id of button and get the index value from it first.
$("[id^='b']").click(function(){
var index = this.id.match(/\d+$/)[0];
$("#q" + index ).toggle();
});
Demo
$(document).ready(function() {
$(".info").hide();
$("[id^='b']").click(function() {
var index = this.id.match(/\d+$/)[0];
$("#q" + index).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block">Button1</button>
<div id="q1" class="info">Info1</div>
<button id="b2" type="button" class="btn btn-primary btn-block">Button2</button>
<div id="q2" class="info">Info2</div>
<button id="b3" type="button" class="btn btn-primary btn-block">Button3</button>
<div id="q3" class="info">Info3</div>
<button id="b4" type="button" class="btn btn-primary btn-block">Button4</button>
<div id="q4" class="info">Info4</div>

Here you go with a solution
$(".info").hide();
$("button").click(function(){
$(this).next('div.info').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary btn-block">Button 1</button>
<div class="info">Div 1</div>
<button type="button" class="btn btn-primary btn-block">Button 2</button>
<div class="info">Div 2</div>
No need to targeting using id, you can do it using jQuery .next()
Hope this will help you.

You could change your selector from $("#b1") to something like $(".btn"), and then use the id to determine which q you want to open, like this:
$(".button").click(function(){
if(this.id){
$("#q"+this.id.substring(1)).toggle();
}
});
This way, it doesn't matter how you arrange your HTML, as long as the ids match
$(document).ready(function(){
$(".info").hide();
$(".btn").click(function(){
if(this.id){
$("#q"+this.id.substring(1)).toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block">b1</button>
<button id="b2" type="button" class="btn btn-primary btn-block">b2</button>
<div id="q1" class="info">q1</div>
<div id="q2" class="info">q2</div>
Here you have it on JSFiddle: https://jsfiddle.net/py8q340p/

Use an extra variable state to check your state and for first time only your first div is toggled later on both the divs are toggled.
$(document).ready(function(){
var state = 0;
$(".info").hide();
$("#b1").click(function(){
if(state ==0 ) {
$('#q1').toggle();
state = 1;
}
else {
$("#q1").toggle();
$('#q2').toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block">Toggle Divs</button>
<div id="q1" class="info">Hello div 1</div>
<div id="q2" class="info">Hello div 2</div>

How to get the index of which element we clicked on

I have a list of containers and I want to add a button that display a terminal on the container where we clicked on the terminal logo.
But I don't how to catch the index of the container in the list.
My HTML is :
<li class="liContainer">
<div>
<h3>{{nameContainer}}</h3>
</div>
<div id="idContainer">
<span>ID: {{idContainer}}</span>
</div>
<div id="stateContainer">
<span class="state">State: {{stateContainer}}</span>
</div>
<div id="terminalContainer" class="hidden">
<div class="terminal hidden"></div>
</div>
<button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
<button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
<button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
<button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
<button type="button" class="cmdLogs"> terminal </button>
</li>
And my JS :
'click .cmdLogs'(event) {
Session.set("displayCmdLogs",true);
//here I need to do something to get the ID with the event and then I could do...
setTimeout(function(){
var term = new Terminal();
console.log("term: " + term);
//.. the getElement on the right one
term.open(document.getElementsByClassName('terminal')[idFromEvent]);
//term.fit();
term.write('Hello from container.js');
},200);
}

I'm assuming the id you want to catch is "idContainer". I'd modify your HTML as follows :
<li class="liContainer">
<div>
<h3>{{nameContainer}}</h3>
</div>
<div id="idContainer">
<span>ID: {{idContainer}}</span>
</div>
<div id="stateContainer">
<span class="state">State: {{stateContainer}}</span>
</div>
<div id="terminalContainer" class="hidden">
<div class="terminal hidden"></div>
</div>
<button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
<button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
<button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
<button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
<button type="button" class="cmdLogs" id="{{idContainer}}"> terminal </button>
</li>
And you js :
'click .cmdLogs'(event, template) {
Session.set("displayCmdLogs",true);
var id = event.currentTarget.id; //The id is here
setTimeout(function(){
var term = new Terminal();
console.log("term: " + term);
//.. the getElement on the right one
term.open(document.getElementsByClassName('terminal')[idFromEvent]);
//term.fit();
term.write('Hello from container.js');
},200);
}

jQuery Filter divs By Class

I'm trying to filter divs by their class, but I'm having some trouble. For some reason, if any button is pressed, everything disappears. I've been troubleshooting this for a while now and I can't figure out why this is happening. A CodePen is here and my attempt is below:
HTML:
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
CSS:
div {
background: #eee;
height: 100px;
width: calc(25% - 10px);
float: left;
margin: 5px;
text-align: center;
}
.active {
color: red;
}
jQuery:
$( document ).ready(function() {
$("#all").click(function() {
$("div").fadeIn(500);
$("#all").addClass("active");
$(":not(#all)").removeClass("active");
});
$("#a").click(function() {
$(".a").fadeIn(500);
$(":not(.a)").fadeOut(0);
$("#a").addClass("active");
$(":not(#a)").removeClass("active");
});
$("#b").click(function() {
$(".b").fadeIn(500);
$(":not(.b)").fadeOut(0);
$("#b").addClass("active");
$(":not(#b)").removeClass("active");
});
$("#c").click(function() {
$(".c").fadeIn(500);
$(":not(.c)").fadeOut(0);
$("#c").addClass("active");
$(":not(#c)").removeClass("active");
});
$("#d").click(function() {
$(".d").fadeIn(500);
$(":not(.d)").fadeOut(0);
$("#d").addClass("active");
$(":not(#d)").removeClass("active");
});
});

It is because of the selector $(":not(.b)") which selects all elements and hides it except .b which will include the body element also.
You need to use a more specific selector, one option is to use a container element like
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('#ct > div').show();
} else {
var $el = $('.' + this.id).show();
$('#ct > div').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div id="ct">
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
Using a common selector like an element selector div also may not work as it could target other non related elements, so another option is to use a common class to all elements that need to be targeted.
var $items = $('.item');
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$items.show();
} else {
var $el = $('.' + this.id).show();
$items.not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="item a b">a & b</div>
<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<div class="item d">d</div>
Note: Also as you can see, there is no need to write separate click handlers for each button - given that the id of the button and the class you are looking for is the same.

The problem is this selector, for example:
:not(.d)
...will select everything that doesn't have class .d, including the body and all the buttons, etc. Restricting it more, like:
div:not(.d)
...should work. See my fix: http://codepen.io/anon/pen/cyhIK

sorting table content based on class name
May be it will help some one:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$("table tbody tr").sort(function (a, b){
return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;
}).appendTo('table tbody');
sort table row values based on class name:
<table>
<thead>
<th>A column</th>
</thead>
<tbody>
<tr>
<td class="x">A</td>
</tr>
<tr>
<td class="c">B</td>
</tr>
<tr>
<td class="">C</td>
</tr>
</tbody>
</table>

slideToggle() method not working

I am using slideToggle() method to hide and reveal some of the long content on my website but the issue iis that it is not working properly. When clicked on Load more the hidden element's css should change from display:none; to display:block; but it wont change and the element remains hidden. I have included my code below.
<div class="categories">
<span class="acc_trigger pull-right btn">Load more</span>
<div class="acc_container">
<div class="sub-categories sec block">
<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-success">Winery</button>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".acc_container > div").hide();
jQuery(".categories span").click(function(){
jQuery(this).siblings(".acc_container > div").slideToggle();
});
})
</script>

The .siblings() method allows us to search through the siblings of these elements in the DOM tree.
You need to use
jQuery(this).siblings(".acc_container").find('div')
instead of
jQuery(this).siblings(".acc_container > div")
jQuery(document).ready(function() {
jQuery(".acc_container > div").hide();
jQuery(".categories span").click(function() {
var div = jQuery(this).siblings(".acc_container").find('div');
div.slideToggle();
$(this).text(div.is(':visible') ? 'Load less' : 'Load more');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categories">
<span class="acc_trigger pull-right btn">Load more</span>
<div class="acc_container">
<div class="sub-categories sec block">
<button type="button" class="btn btn-success">Button
</button>
<button type="button" class="btn btn-success">Button
</button>
<button type="button" class="btn btn-success">Winery
</button>
</div>
</div>
</div>
You can use :visible selector
jQuery(".categories span").click(function() {
var div = jQuery(this).siblings(".acc_container").find('div');
div.slideToggle();
$(this).text(div.is(':visible') ? 'Load less' : 'Load more');
});