We Keep Coding

make div visible when another div is activated by a button

I'm trying to make 1 button show two divs when I click it using jquery.
So on click of button #show1 I want div #cybernetics + div .gif1 to appear and on click on button #show2 I want div #eat + div .gif2 to appear
Is it possible? thank you!
currently I have the following code
$('document').ready(function() {
$('#show1, #show2, #show3').click( function() {
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide();
$div.fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>

Simply you can show hide as per button click as bewlo.
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('document').ready(function() {
$('#show1').click( function() {
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('#cybernetics').show();
$('.gif1').show();
});
$('#show2').click( function() {
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('#eat').show();
$('.gif2').show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>

I assume from the logic you're trying to keep this DRY, so you don't want multiple event handlers. As such you can select the target element based on the data-href attribute of the clicked button, then get the next() element from that and fade them both in, something like this:
$('document').ready(function() {
$('.toggle').click(function() {
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide().next().hide();
$div.add($div.next()).fadeToggle();
});
});
.demo,
.demo + div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" class="toggle" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" class="toggle" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>

You can make change to below code
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div class="allBox cybernetics" style="display: none;">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="allBox cybernetics" style="display: none;">
<img src="cybernetics.gif">
</div>
<div class="allBox eat" style="display: none;">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="allBox eat" style="display: none;">
<img src="eat.gif">
</div>
and your js code goes here
<script type="text/javascript">
$("#show1").on('click', function(){
hrefVal = $(this).attr('data-href');
$(".allBox").css('display', 'none');
$("."+hrefVal).css('display', 'block');
})
$("#show2").on('click', function(){
hrefVal = $(this).attr('data-href');
$(".allBox").css('display', 'none');
$("."+hrefVal).css('display', 'block');
})
</script>

This is a solution maintaining your data structure and name convention.
I also fix a bug when clicking multiple times on the same button would fade in and out the right items.
$('document').ready(function() {
$('#show1, #show2, #show3').click( function() {
var target = $(this).data('href');
var $div = $('#' + target);
$('.demo').not($div).hide();
$(".gif img:not([src^='"+target+"'])").hide();
$(".gif img[src^='"+target+"']").show();
$div.fadeIn();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif">
<img src="eat.gif">
</div>

Get the content of childNodes

I have a HTML structure like below. I need to get the header content and description content.
<div id="results">
<div class="ui list">
<div class="item">
<div class="content">
<a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
<div class="description">Lat Phrao, Bangkok, 10230</div>
</div>
</div>
</div>
</div>
I have used following code
$('#results > .ui.list')[0].childNodes[0].childNodes[1].innerHTML
to get the string like
"<a class="header" onclick=" toMaker(event, 967)">MahachaiHolding</a><div class="description">Lat Phrao, Bangkok, 10230</div>"
But now I am confused about how to get header name and description name?

You need to find the .html() of the .header and .description
const $content = $("#results .ui.list .item .content");
console.log($content.find(".header").html());
console.log($content.find(".description").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<div class="ui list">
<div class="item">
<div class="content">
<a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
<div class="description">Lat Phrao, Bangkok, 10230</div>
</div>
</div>
</div>
</div>

$('#results > .ui.list')[0].childNodes[0].childNodes[1].innerHTML
$('#results > .ui.list').find('.header') //will get you header element
$('#results > .ui.list').find('.description') //will get you description element
is this what you mean?
https://api.jquery.com/find/
refrence url

Try this...
The output will give only the text of the element not the inner html
/// Get the header text
console.log($('#results .ui.list a.header').text());
/// Get the description text
console.log($('#results .ui.list div.description').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<div class="ui list">
<div class="item">
<div class="content">
<a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
<div class="description">Lat Phrao, Bangkok, 10230</div>
</div>
</div>
</div>
</div>

Try this...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($(".content").text())
});
</script>
</head>
<body>
<div id="results">
<div class="ui list">
<div class="item">
<div class="content">
<a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
<div class="description">Lat Phrao, Bangkok, 10230</div>
</div>
</div>
</div>
</div>
</body>
</html>

whats the best way to control showing and hiding multiple charts and divs in a page

I am new in javascript,i have a page consist of different Card layouts and each card has its own chart or buttons or grids,some of them should be hidden by default and some of them should be hide or visible by click,since the page is growing by more demands ,controlling these hid/e/show is becoming a nightmare,i would like you tell me whats the best way to do this?for example i have a following div which has a chart:
<section style="width:100%;margin-top:2%;" >
<div id="btnCurrentStatID" class="card ShowHide" style="float:right;width:20%;height:350px;display:none;">
<div class="wrapper">
<div class="containerBtns" style="width:100%;float:right" >
<button type="button" id="btnErrorStat" class="btnsForCrew-Common "></button>
<button type="button" id="btnIdle" class="btnsForCrew-Common "></button>
<button type="button" id="btnService" class="btnsForCrew-Common "></button>
<button type="button" id="btnLinkDn" class="btnsForCrew-Common"></button>
<button type="button" id="btnDataIn" class="btnsForCrew-Common" ></button>
<button type="button" id="btnrepOff" class="btnsForCrew-Common"></button>
</div>
</div>
</div>
<div id="faultStatChartID" class="card ShowHide" >
<div id="chart">
</div>
</div>
<div id="pieChartID" class="card ShowHide">
<div id="pieChart"></div>
</div>
</section>
<section style="width:100%;float:left;margin-top:3%;" id="faultStatSubGroupsSec">
<div id="subcatNameChartSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subcatNameChart"></div>
</div>
</div>
<div id="subcatErrorChartSectionID" class="card" style="width:49%;float:right;display:none">
<div class="container">
<div id="subcatErrorChart"></div>
</div>
</div>
<div id="subCatIdnameSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subCatIdname"></div>
</div>
</div>
<div id="subCatITurNameSectionID" class="card"style="width:49%;float:right;display:none">
<div class="container">
<div id="subCatITurName"></div>
</div>
</div>
<div></div>
<div></div>
</section>
i gave it showhide class,and by default its hidden,when i click on filter button it will be visible,and other divs should be hidden,it this continues,imagine how many time i should do it and manage to control them all,
$(".ShowHide").css("display", "block");
$("#subcatNameChartSectionID").hide();
$("#subcatErrorChartSectionID").hide();
$("#subCatIdnameSectionID").hide();
$("#subCatITurNameSectionID").hide();

A way would be to use a class for hiding.
.hide {
display: none;
}
And a hideable class for accessing every item that should be able to be hidden. The class hide can be added to hide the element.
<div class="hideable">1 hideable</div>
jQuery offers methods for class manipulation:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
Here is the full snippet code:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="unique1" class="hideable">
1 hideable
</div>
<div id="unique2" class="hideable">
2 hideable
</div>
<div id="unique3" class="hideable hide">
3 hideable
</div>
<div id="unique4" class="hideable hide">
4 hideable
</div>
<div id="unique5" class="hide">
5 other
</div>

How to change font color of a selected div

just need some help on how to change the font color of the title for the current div being selected.
See my code below:
HTML
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="photography" class="photography">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="photography-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="graphics" class="graphics">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="graphics-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
JS
$("#hideshow1").click(function(){
$("#photography").slideToggle("slow");
$("#graphics").slideUp("slow");
});
$("#hideshow2").click(function(){
$("#graphics").slideToggle("slow");
$("#photography").slideUp("slow");
});
What I'm trying to do is when I click Photography, it will change the font color and when I click Graphics, the photography color would go back to black and graphics would now be the colored font.

function chgfont(type){
// document.write("<input type=\"button\" id=\"hideshow2\" name=\"hideshow2\" value=\"red\" class=\"btn\" onclick=\"chgfont('B');\"><input type=\"button\" id=\"hideshow1\" name=\"hideshow1\" value=\"blue\" class=\"btn\" onclick=\"chgfont('A');\"> ");
if(type=="A"){
document.getElementById("colorA").style.color ="blue";
// document.write("<font color=\"blue\">Font colors is blue</font>");
}else{
document.getElementById("colorA").style.color ="red";
// document.write("<font color=\"red\">Font colors is red</font>");
}
}
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input type="button" id="hideshow1" name="hideshow1" value="blue" class="btn" onclick="chgfont('A');">
<input type="button" id="hideshow2" name="hideshow2" value="red" class="btn" onclick="chgfont('B');">
<hr class="small">
<div id="colorA">
Colored By Santa
</div>
</div>
</div>
</div>
</div>
I hope i can help you.

I would suggest a little different formation of your function. Select the .btn elements and, depending on the clicked element, get the id and perform your actions.
As for the font color, write up a css rule giving the desired color and simply add, or remove this class form the respective elements:
jQuery
$('.btn').on('click', function() {
var that = $(this);
var id = that.attr('id');
//Remove .colored class form all .btn elements
$('.btn').removeClass('colored');
//Add .colored class to the clicked element
that.addClass('colored');
var ph = $("#photography");
var gr = $("#graphics");
//Permorm the appropriate action depending on the clicked id
if (id == '#hideshow1') {
ph.slideToggle("slow");
gr.slideUp("slow");
} else if (id == '#hideshow2') {
gr.slideToggle("slow");
ph.slideUp("slow");
}
});
CSS
.colored { color:red }

Loading a tab on button click

I am not that much familiar with button html or jquery so please forgive if this is a repeated question or if I asked it wrong. What i want to do is is to load a tab on an external button click. The code for the tabs are as follows,
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo">lg</strong>
<ul class="tabset buttons">
<li class="active">
<span>Dashboard</span><em></em>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<span>Map visualization</span><em></em>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<span>Trending</span><em></em>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
what this code currently does is when the user clicks on the necessary sidebar element it loads its corresponding div to the left of the page. what I need to do the same by clicking on a button jquery or javascript which is situated in the header area of the page.
for example something like this,
<script type="text/javascript">
$(document).ready(function () {
$("input[name='btn']").click(function() {
//code to display the contents of a tab
});
});
</script>
any help would be much helpful :) I don't know how to make this question even more clearer. hope its understandable Thank you :)

I think this will work, I'm sure there is a more concise way though.
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
Update: This actually works (be sure to change the class and id selectors to your naming convention), as tested here.
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});