We Keep Coding

Display content related to only those button it is clicked in HTML

I have three buttons in HTML, orders and products and supplier. I want when the user clicks orders order is being shown, when the user clicks products, the product is shown, and the name of the supplier when it is clicked.
function changedata(parameter){
if(parameter==0){
document.getElementById('myorders').style.fontSize="25px";
}
else if(parameter==1){
document.getElementById('myproducts').style.fontSize="25px";
}
else{
document.getElementById('mysupplier').style.fontSize="25px";
}
}
<button class="button" onclick="changedata(0)">ORDERS</button>
<button class="button" onclick="changedata(1)">PRODUCTS</button>
<button class="button" onclick="changedata(2)">SUPPLIER</button>
<div id="myorders">
<p>Laptop, Earphone</p>
</div>
<div id="myproducts">
<p>Earphone, smart watch</p>
</div>
<div id="mysupplier">
<p>Amazon, E-kart</p>
</div>
But it won't hide data and serve my need, I'm a beginner in web development, looking for kind help to show data only when the corresponding button is pressed.

Try giving each element a default value of display:none in your css, as such -
#myorders,
#mysuppliers,
#myproducts {
font-size: 25px;
display: none;
}
This will select each element and hide them right away.
Then, when a button is pressed, you can use
document.getElementById('___').style.display = 'block';
to then show that element.
Here is the final product:
function changedata(parameter){
if(parameter==0){
document.getElementById('myorders').style.display = 'block';
}
else if(parameter==1){
document.getElementById('myproducts').style.display = 'block';
}
else{
document.getElementById('mysupplier').style.display = 'block';
}
}
#myorders,
#myproducts,
#mysupplier{
font-size: 25px;
display: none;
}
<button class="button" onclick="changedata(0)">ORDERS</button>
<button class="button" onclick="changedata(1)">PRODUCTS</button>
<button class="button" onclick="changedata(2)">SUPPLIER</button>
<div id="myorders">
<p>Laptop, Earphone</p>
</div>
<div id="myproducts">
<p>Earphone, smart watch</p>
</div>
<div id="mysupplier">
<p>Amazon, E-kart</p>
</div>
If you would like to have the element toggle between hidden and shown on each button press, I recommend toggling a class with javascript, as such:
function changedata(parameter){
if(parameter==0){
document.getElementById('myorders').classList.toggle('active');
}
else if(parameter==1){
document.getElementById('myproducts').classList.toggle('active');
}
else{
document.getElementById('mysupplier').classList.toggle('active');
}
}
#myorders,
#myproducts,
#mysupplier{
font-size: 25px;
display: none;
}
#myorders.active,
#myproducts.active,
#mysupplier.active{
display: block;
}
<button class="button" onclick="changedata(0)">ORDERS</button>
<button class="button" onclick="changedata(1)">PRODUCTS</button>
<button class="button" onclick="changedata(2)">SUPPLIER</button>
<div id="myorders">
<p>Laptop, Earphone</p>
</div>
<div id="myproducts">
<p>Earphone, smart watch</p>
</div>
<div id="mysupplier">
<p>Amazon, E-kart</p>
</div>

There are slightly easier ways to connect each div to its corresponding button, and one of them is to use data attributes. We can add a data attribute to each button the text of which matches the id of its corresponding div.
(I'm assuming that when you click on one button all the other divs are hidden, and only its div shows.)
This example uses more modern JS techniques but I'll guide you through them, comment everything, and provide documentation at the end. You don't have to understand everything here but you're probably going to bump up against these things eventually, so you might as well take a look at them now.
Here's a rundown of how this all works:
Remove the inline listeners from the buttons. Modern JS uses addEventListener.
Wrap the buttons in a container. What we're going to use is a technique called event delegation. Instead of attaching listeners to every button we attach one to the container and this captures any events that "bubble up" the DOM from its child elements. We can then call a function when a child element is clicked.
The function does a few things. First it checks to see if the clicked element was actually a button. Then it hides all the "panels" by removing a class called "show" from them ("show" sets the element's display to block - initially all panels have their display set to none). Then based on the id from the button's data attribute it forms a selector with it, and we use that to target its corresponding div and apply the "show" class.
// Cache out buttons container, and all of the panels
const buttons = document.querySelector('.buttons');
const panels = document.querySelectorAll('.panel');
// Add an event listener to the buttons container
buttons.addEventListener('click', handleClick);
// When a child element of `buttons` is clicked
function handleClick(e) {
// Check to see if its a button
if (e.target.matches('button')) {
// For every element in the `panels` node list use `classList`
// to remove the show class
panels.forEach(panel => panel.classList.remove('show'));
// "Destructure" the `id` from the button's data set
const { id } = e.target.dataset;
// Create a selector that will match the corresponding
// panel with that id. We're using a template string to
// help form the selector. Basically it says find me an element
// with a "panel" class which also has an id that matches the id of
// the button's data attribute which we just retrieved.
const selector = `.panel[id="${id}"]`;
// Select the `div` and, using classList, again add the
// show class
document.querySelector(selector).classList.add('show');
}
}
.panel { display: none; }
.show { display: block; }
.button { text-transform: uppercase; }
.button:hover { cursor: pointer; background-color: #fffff0; }
<div class="buttons">
<button data-id="myorders" class="button">Orders</button>
<button data-id="myproducts" class="button">Products</button>
<button data-id="mysupplier" class="button">Supplier</button>
</div>
<div class="panel" id="myorders"><p>Laptop, Earphone</p></div>
<div class="panel" id="myproducts"><p>Earphone, smart watch</p></div>
<div class="panel" id="mysupplier"><p>Amazon, E-kart</p></div>
Additional documentation
addEventListener
classList
Destructuring assignment
forEach
matches
querySelector
querySelectorAll
Template string

Which JS technique: select parent of targeted element?

I'm not sure that the terms in the question are correct; however I have some HTML (and unfortunately, I am stuck with its structure):
<div>
<ul>
<li>Turn left</li>
<li>Turn right</li>
</ul>
</div>
<div class="possible-outcome">
<span id="turn-left"></span>
<p>You step into a puddle.</p>
</div>
<div class="possible-outcome">
<span id="turn-right"></span>
<p>You fall into a ditch.</p>
</div>
What I would like is all possible-outcome divs to become hidden by having:
div.non-actual-outcome {display: none;}
applied to them, as soon as the user selects one of the hyperlinks, except for the div containing the span with the target id, which should have the actual-outcome class applied to it by JS, so it and it alone is displayed:
div.actual-outcome {display: block;}
When the user hits some other link to a span in a possible-outcome div, then that div will become the only one visible (until the user hits a link that isn't to one of those spans).
Here is some sample code:
div.non-actual-outcome {
display: none;
}
div.actual-outcome {
display: block;
}
<div>
<ul>
<li>Turn left</li>
<li>Turn right</li>
</ul>
</div>
<div class="possible-outcome">
<span id="turn-left"></span>
<p>You step into a puddle.</p>
</div>
<div class="possible-outcome">
<span id="turn-right"></span>
<p>You fall into a ditch.</p>
</div>
What is the simplest way to achieve this (and the correct terms in which to ask the question)?

First, add a common class to all your a elements so that they can be distinguished, for example class="tab":
<a class="tab" href="#turn-left">Turn left</a>
Second, hide all div elements by default by adding the display:none property to the CSS selector .possible-outcome (which all div elements have):
div.possible-outcome {
display: none;
}
and use only actual-outcome to hide/show the div you want. No need to use two classes for that, just one will do. If the div has the class actual-outcome then it will be shown, if not then it won't (because it has the class possible-outcome).
Third, when a .tab element get clicked, select its target span along with that span's parent and do some logic: if the span exists and its parent is not currently shown (not having the class actual-outcome), then hide the actually shown div (if exists) and show the current span's parent instead.
Note: If you want to show a div by default just add the class actual-outcome to it:
<div class="possible-outcome actual-outcome">
Full code:
document.addEventListener("click", function(ev) {
var target = ev.target; // get the element that has been clicked
if(target.classList.contains("tab")) { // if the clicked element is a .tab element
var span = document.querySelector(target.getAttribute("href")), // then select that .tab's span to show
parent = span.parentElement; // select the parent of that span (perhaps check if the span exists first to not get the "can't access property parentElement of null")
if(span && !parent.classList.contains("actual-outcome")) { // if the span exists and its parent is not currently shown (not having the class "actual-outcome")
var visibleOutcome = document.querySelector(".actual-outcome"); // then select the current shown element (which we know will have the class "actuall-outcome")
if(visibleOutcome) { // if there is one
visibleOutcome.classList.remove("actual-outcome"); // hide it by remove the class "actual-outcome" from its classList
}
parent.classList.add("actual-outcome"); // and show the current span's parent by adding that same old class
}
}
});
div.possible-outcome {
display: none;
}
div.actual-outcome {
display: block;
}
<div>
<ul>
<li><a class="tab" href="#turn-left">Turn left</a></li>
<li><a class="tab" href="#turn-right">Turn right</a></li>
</ul>
</div>
<div class="possible-outcome">
<span id="turn-left"></span>
<p>You step into a puddle.</p>
</div>
<div class="possible-outcome">
<span id="turn-right"></span>
<p>You fall into a ditch.</p>
</div>

Just for completion, the Divio Cloud interactive debugging checklist for deployments is our implementation of the solution to this problem.
It's like a choose your own adventure story in our Sphinx documentation, to help users identify why a deployment may have failed.
It was was developed on the basis of Ibrahim Mahrir's answer:
One of our actual JS experts (i.e. not me) used my working proof-of-concept based on Ibrahim's answer for the final version.
The JavaScript and CSS are both embedded in the page itself.
The HTML structure is largely determined by the output from Sphinx, hence the need to accommodate the arrangement of elements.

This is the best solution I could come up with. This does not modify the structure by adding any other classes than the ones provided.
HTML:
<div>
<ul>
<li>Turn left</li>
<li>Turn right</li>
</ul>
</div>
<div class="possible-outcome">
<span id="turn-left"></span>
<p>You step into a puddle.</p>
</div>
<div class="possible-outcome">
<span id="turn-right"></span>
<p>You fall into a ditch.</p>
</div>
CSS:
div.non-actual-outcome {
display: none;
}
div.actual-outcome {
display: block;
}
JS:
var outcomeDivs = document.getElementsByClassName('possible-outcome') // selects all divs and returns them as an array
var links = document.querySelectorAll('li') // selects all <li> and returns them as array
// This is turn left li, we will hide turn-right when clicking it.
links[0].addEventListener('click', function(){
outcomeDivs[1].classList.add('non-actual-outcome'); // hides turn-right
links[1].style.display = 'none'; // hides other link
});
// This is turn right li, we will hide turn-left when clicking it.
links[1].addEventListener('click', function(){
outcomeDivs[0].classList.add('non-actual-outcome'); // hides turn-left
links[0].style.display = 'none'; // hides other link
});
CodePen

Can't hide other elements while clicking on another

I'm trying to make a toggle which works, but every element I click on creates a stack of these showed elements. Instead I'm trying to hide everything and display only element that I clicked on. Now I can only hide it when I click on the same element twice, which is not what I want. I want to click on one and hide previous ones that were showing.
.totalpoll-choice-image-2 is a bunch of images that always has to be shown. They are what the user clicks on to display hidden description under each image. That description shows up when I click on .totalpoll-choice-image-2. There are 5 images with that class. The next image I click on, I want to hide the previous description box.
My code:
jQuery(document).ready(function() {
var element = document.getElementsByClassName("totalpoll-choice-image-2");
var elements = Array.prototype.slice.call(Array.from( element ) );
console.log(elements);
jQuery(element).each(function(item) {
jQuery(this).unbind('click').click(function(e) {
e.stopPropagation();
var id = jQuery(this).attr("data-id");
console.log(this);
//jQuery("#" + id).css({"display": 'block !important'});
//document.getElementById(id).style.setProperty( 'display', 'block', 'important' );
var descriptionContainer = document.getElementById(id);
var thiss = jQuery(this);
console.log(thiss);
console.log(jQuery(descriptionContainer).not(thiss).hide());
jQuery(descriptionContainer).toggleClass("show");
});
})
})

You can attach event handlers to a group of DOM elements at once with jQuery. So in this case, mixing vanilla JS with jQuery isn't doing you any favors - though it is possible.
I threw together this little example of what it sounds like you're going for.
The script itself is very simple (shown below). The classes and IDs are different, but the idea should be the same:
// Assign click handlers to all items at once
$('.img').click(function(e){
// Turn off all the texts
$('.stuff').hide();
// Show the one you want
$('#' + $(e.target).data('id')).show();
})
https://codepen.io/meltingchocolate/pen/NyzKMp
You may also note that I extracted the ID from the data-id attribute using the .data() method, and attached the event listener with the .click() method. This is the typical way to apply event handlers across a group of jQuery objects.

From what I understood based on your comments you want to show only description of image that has been clicked.
Here is my solution
$('.container').on('click', 'img', function() {
$(this).closest('.container').find('.image-description').addClass('hidden');
$(this).siblings('p').removeClass('hidden');
});
https://jsfiddle.net/rtsj6r41/
Also please mind your jquery version, because unbind() is deprecated since 3.0

You can use event delegation so that you only add your event handler once to the parent of your images. This is usually the best method for keeping work the browser has to do down. Adding and removing classes is a clean method for show and hide, because you can see what is happening by looking at your html along with other benefits like being easily able to check if an item is visible with .hasClass().
jsfiddle: https://jsfiddle.net/0yL5zuab/17/
EXAMPLE HTML
< div class="main" >
<div class="image-parent">
<div class="image">
</div>
<div class="image-descr">
Some text. Some text. Some text.
</div>
</div>
<div class="image-parent">
<div class="image">
</div>
<div class="image-descr">
Some text. Some text. Some text.
</div>
</div>
<div class="image-parent">
<div class="image">
</div>
<div class="image-descr">
Some text. Some text. Some text.
</div>
</div>
<div class="clear">
</div>
</div>
EXAMPLE CSS
.image-parent{
height: 100px;
width: 200px;
float: left;
margin: 5px;
}
.image-parent .image{
background: blue;
height: 50%;
width: 100%;
}
.image-descr{
display: none;
height: 50%;
width: 100%;
}
.show-descr{
display: block;
}
.clear{
clear: both;
}
EXAMPLE JQUERY
$(".main").on("click", ".image-parent", ShowDescription);
function ShowDescription(e) {
var $parent = $(e.target).parent(".image-parent");
var $desc = $parent.find(".image-descr");
$(".image-descr").removeClass("show-descr");
$desc.addClass("show-descr");
}

Hide/show block with CSS

A previous developer built a webpage with a woman and numbers on it to click for to show services related to a bodypart. You can see the current page here...
http://dermanaissance.com/nos-solutions/
My issue here is that he built the solution with CSS VS using JS or Jquery. I'm trying to hide the other blocks when a specific block has been clicked using what he's already done but am afraid isn't possible only using CSS.
I'm not quite sure how to tackle this one without using Jquery as this is usually how I would approach this, any ideas?
This is the code right now...
<div id="anchor-1" class="nos-anchor">1
<span class="nos-block">
<span class="nos-line"> </span>
<ul>
<li>Lift Sans Chirurgie</li>
<li>Atténuation des Rides</li>
<li>Contour des Yeux</li>
<li>Double-menton</li>
<li>Bajoues</li>
<li>Relâchement du Cou</li>
<li>Ouverture du Regard</li>
<li>Augmentation du Volume</li>
<li>Amélioration du Teint de la Peau</li>
<li>Acné Active</li>
<li>Cicatrices d’Acné</li>
<li>Décolleté</li>
<li>Atténuation des Cicatrices</li>
<li>Photorajeunissement</li>
<li><a href="/taches-pigmentaires-et-melasma/">
Taches pigmentaires et Mélasma</a></li>
<li>Couperose et Rosacée</li>
<li>Varicosités</li>
</ul>
</span>
</div>
and the CSS that makes this solution work...
.page-id-9 #main-content .nos-anchor {
position: absolute;
display: block;
z-index: 9;}
.page-id-9 #main-content .nos-anchor .nos-block {
position: absolute;
display: none;}
.page-id-9 #main-content .nos-anchor .nos-block a {
display: block;}
.page-id-9 #main-content .nos-anchor .nos-line {
display: block;
position: absolute;
top: 20px;}

If you want a pure CSS solution I suggest looking into the Target psuedo element, otherwise -
Here is a pure javascript solution. Just give the divs you are hiding and showing an ID, and call them with the clickable object using onclick="hideShow(sectionID);"
<div style="height:40px; width:40px; background:red;" onclick="hideShow('div1')">
<div id="div1" style="display:none; background:orange; width:15px; height:15px;"></div>
</div>
<div style="width:40px; height:40px; background:yellow;" onclick="hideShow('div2')">
<div id="div2" style="display:none; background:green; width:15px; height:15px;"></div>
<div></div>
</div>
<div style="width:40px; height:40px; background:blue;" onclick="hideShow('div3')">
<div id="div3" style="display:none; background:purple; width:15px; height:15px;"></div>
<div></div>
</div>
var currrentElementShowing;
function hideShow(sectionID) {
if (document.getElementById(sectionID) != currrentElementShowing) {
document.getElementById(sectionID).style.display = "block";
if (currrentElementShowing != undefined) {
currrentElementShowing.style.display = "none";
}
currrentElementShowing = document.getElementById(sectionID);
} else {
}
}
https://jsfiddle.net/cxjndqzu/

Wow "page-id-9" is pretty terrible naming convention (I know you didn't do it, but MAN!).
So, what I would do is create two CSS classes:
"ToggleClass"
"Active"
You would assign "ToggleClass" to all of your list items. Using CSS, you make "ToggleClass" items that ALSO have the "Active" class display how you would like. "ToggleClass" items WITHOUT the "Active" class would be hidden as you would like.
Then, using jQuery (sorry, but I think it has to be done), make the following function:
$(document).ready(function(){
$(".ToggleClass").on("click", function(){
$(".ToggleClass").removeClass("Active");
$(this).addClass("Active");
});
});
This event will fire anytime someone clicks a "ToggleClass" element. First, it removes the "Active" class from ALL elements that have "ToggleClass" (this ensures that you won't simultaneously have two elements with the "Active" class). Next, it adds the "Active" class to the element that was clicked.
Leave a comment and let me know how this works for you - Good luck!

Having looked at your page, you could apply something like this. You'll have to use pure Javascript or Jquery. Since you mentioned JQuery as your preference:
html
<div>
<div class="pill">1</div>
</div>
<div>
<div class="pill">2</div>
</div>
js
$('.pill').click(function(){
$(this).toggleClass('active')
if ($(this).hasClass('active')){
$('.pill').not(this).fadeOut(200)
}else{
$('.pill').not(this).fadeIn(200)
}
});
The idea here is to use Jquery's toggleClass method and to check whether the click element has the active class, and if it does hide the other elements. This should steer you in the right direction
Fiddle

stuck with onclick tried google couldn't find answer

i need help getting this to work, tried everything google had to offer.. but still stuck. what i need it to do is load the value of (div id="availablecredits") to (div id="beta") on click. can any body help me out?
onclick="javascript:document.getElementById('beta').value=(javascript:document.getElementById('availablecredits').value)"
i also tried onclick="javascript:document.getElementById('beta').value=('#availablecredits')"

The property value is common for input elements like <input>, <select>, <textarea> and <button>
I think what you want is to copy a content of a <div> element to another div. If it's the case, use innerHTML instead of value.
Here is a snippet, just click on the gray area.
#div-two {
min-height: 20px;
background: #CCC;
}
<div id="div-one">
Hello this is #div-one
</div>
<div id="div-two" onclick="document.getElementById('div-two').innerHTML=document.getElementById('div-one').innerHTML"></div>
SNIPPET #2
You've defined a third <div> which you use as trigger but you can't click it if it's not visible, because it's height is 0. Specify some text inside it, then it's visible and the JS part work. Take a look at the snippet.
#getCredits {
background: #CCC;
}
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits" onclick="document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML">Click here to get available credits</div>
SNIPPET #3 - jQuery
$('#getCredits').click(function() {
$("#beta").html($('#availablecredits').html());
});;
#getCredits {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>

Simple javascript function, change the ids in the function call to those of the elements in question.
<script>
function set_value( src,tgt ){
document.getElementById( tgt ).innerHTML=document.getElementById( src ).innerHTML;
}
</script>
<style>.p5{ display:block; padding:1rem; margin:1rem; border:1px solid black;}</style>
<div class='p5' id='src_div' onclick="set_value('src_div','tgt_div')">Weebles wobble but they don't fall down!</div>
<div class='p5' id='tgt_div'></div>
Or you can use a link to set the value

you should try to avoid writing inline event.try this:
<style>
#getCredits {
background: #CCC;
}
</style>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
<script>
document.getElementById('getCredits').addEventListener("click",function(){
document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML;
});
</script>
Why inline css and javascript are bad:http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

The .val() method is sometimes useful:
var input = $("#Input").val();