We Keep Coding

Div Hide And Show

In the picture, all the prices are in EUR, the prices of tr are hidden on the site.
When I click on the link above, TL and TL prices will be shown and euro prices will be hidden.
When I click on the euro link, the tl will be hidden and the euro will be displayed.
There is a problem in the code but I couldn't solve it
thanks in advance
<button onclick="TL()">TL</button>-<button onclick="EURO()">EURO</button>
<div id="fiyat"> 29.5 </div><div id="fiyattl" style="display: none;" > 400 TL </div>
<div id="fiyat1"> 29.5 </div><div id="fiyattl1" style="display: none;" > 500TL</div>
<div id="fiyat2"> 29.5 </div><div id="fiyattl2" style="display: none;" > 600TL </div>
<div id="fiyat3"> 29.5 </div><div id="fiyattl3" style="display: none;" > 700 TL</div>
<div id="fiyat4"> 29.5 </div><div id="fiyattl4" style="display: none;" > 800 TL</div>
<script>
function TL() {
var x = document.getElementById("fiyattl");
var y = document.getElementById("fiyattl1");
var z= document.getElementById("fiyattl2");
var t = document.getElementById("fiyattl3");
var w = document.getElementById("fiyattl4");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
if (y.style.display === "none") {
y.style.display = "block";
} else {
y.style.display = "none";
}
if (z.style.display === "none") {
z.style.display = "block";
} else {
z.style.display = "none";
}
if (t.style.display === "none") {
t.style.display = "block";
} else {
t.style.display = "none";
}
if (w.style.display === "none") {
w.style.display = "block";
} else {
w.style.display = "none";
}
}
</script>

If you assign a className to these div elements that reflects the currency then you can identify all the nodes that are to be either hidden or displayed quite easily using native javascript methods. In the following the inline event handlers are replaced with externally registered listeners that use the name of the clicked button to identify the price nodes that have that name as the class attribute. You could use dataset attributes instead of course but there is no need to use multiple IDs which can easily become hard to maintain and prone to troubles.
/*
querySelectorAll will attempt to match DOM elements based upon the
expression used. Here we find both/all buttons in the DOM - this
could be honed to identify ONLY the buttons of interest if required
by modifying the buttons (add a className for instance) and editing the
expression used.
The button collection is iterated through and an event listener is
added to process the `click` event.
*/
document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){
/*
The click event handler
Identify the DIV elements that have the class attribute that matches the name of the button.
Iterate through that collection and set the display property to "block"
*/
let col=document.querySelectorAll( 'div.'+this.getAttribute('name') );
col.forEach( n => n.style.display='block' )
/*
then identify the DIV elements that are not relevant, iterate through
that collection and assign them as hidden.
*/
col=document.querySelectorAll('div:not([class="'+this.getAttribute('name')+'"])');
col.forEach( n => n.style.display='none' );
}));
<button name='tl'>TL</button>-<button name='euro'>EURO</button>
<div class='euro'>29.5</div><div class='tl' style='display:none;'>400 TL</div>
<div class='euro'>29.5</div><div class='tl' style='display:none;'>500TL</div>
<div class='euro'>29.5</div><div class='tl' style='display:none;'>600TL</div>
<div class='euro'>29.5</div><div class='tl' style='display:none;'>700 TL</div>
<div class='euro'>29.5</div><div class='tl' style='display:none;'>800 TL</div>

Hide text with the same button it opened it

how can I hide the text opened while clicking on a button by clicking on the same button ? In other words, the same button should show or hide a text when you click on it.
Here's my code that shows a text :
<h3>
<button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
<p id="infos"></p>
<script>
function myFunction() {
document.getElementById("infos").innerHTML = "blablabla";
}
</script>
</h3>

Define a variable to save the button state
var clicked = 0;
function myFunction() {
if(clicked == 0 ) {
document.getElementById("infos").innerHTML = "blablabla";
clicked = 1;
} else {
document.getElementById("infos").innerHTML = "";
clicked = 0;
}
}
<h3>
<button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
<p id="infos"></p>
</h3>

Try this out, it worked for me:
function showHide() {
var demo = document.getElementById('demo');
if (demo.innerHTML === "") {
demo.innerHTML = "bla";
} else {
demo.innerHTML = "";
}
}
<p id="demo"></p>
<button onclick="showHide()">Show Hide</button>

Quite simple, using jQuery—
$( "#button" ).click(function() {
$('#text-to-toggle').toggle(200);
});

how do I use the same link to "re-hide" previously hidden text via Javascript?

The below code snippet shows the invite code when I click "Invite Code". But how do I re-hide the invite code if the same link is clicked again? And can it be done where it cycles back and forth with subsequent clicks? I didn't write this code but merely modified it to my use. I am still very new to this type of thing. Thanks!
<style>
div.hide { display:none; }
div.show { text-align:center; }
</style>
<script type='text/javascript'>
function showText(show, hide) {
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<br>
<font color="red">-</font>Home<font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>

Simply use this function:
function showText(id)
{
var elem = document.getElementById(id);
if(elem.style.display == 'none')
{
elem.style.display = 'inline';
}
else
{
elem.style.display = 'none';
}
}
<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>
PS: This also works for 2 Elements...
Greetings

I really don't see the use for the show class. You could just toggle the hide class on the elements that you want to toggle.
Assume you dont need the show class, then use the classList.toggle function like this
function toggle(target){
document.getElementById(target).classList.toggle('hide');
}
.hide{ display:none }
<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>

save the state with a boolean
var hided = true;
function showText(show,hide){
if (hided){
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
else{
document.getElementById(show).className = "hide";
document.getElementById(hide).className = "show";
}
hided = !hided;
}
fiddle with this code and some of your html : fiddle,
isn't it the expected behavior ?

<html>
<div ID="content" style="display:block;">This is content.</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<button onclick="toggleContent()">Toggle</button>
</html>
//Code is pretty self explanatory.

Javascript if and else runs simultaneously

I want a link to select by onclick, when the link is clicked so selected, the background should change. When I click the selected link again then the background should be transparent again.
My Script:
<div style="background: transparent;" onclick="click()" id="0">
HTML:
Click
function click() {
var click = document.getElementById("0");
if(click.style.background == "transparent") {
click.style.background = "red";
}
else {
click.style.background = "transparent";
}
}

As far as I understand, you simply want a toggle. Functional code as follows.
2 important notes:
ID must not be zero (or it breaks): I replaced it by 10;
don't use click() as it's a reserved name: I replaced it by toggle().
Not much change to your code apart from the above.
Cheers.
Update to handle multiple divs: I now pass the object:
<html>
<body>
<div style="background: red;" onclick="toggle(this)" id="10">
CLICK ON 10 TO TOGGLE MY BACKGROUND COLOR
</div>
<div style="background: red;" onclick="toggle(this)" id="20">
CLICK ON 20 TO TOGGLE MY BACKGROUND COLOR
</div>
<script>
function toggle(o) {
if(o.style.background == "transparent") {
o.style.background = "red";
alert("red on "+o.id);
}
else {
o.style.background = "transparent";
alert("transparent on "+o.id);
}
}
</script>
</body>
</html>

Two things here, don't call the function click, and use the backgroundColor property, not background as background is a compound property expecting more values than just the color, so comparing it to just a color (i.e. = 'transparent") may not work
so
HTML:
<div style="background-color: transparent;" onclick="notclick()" id="0">
Javascript
function notclick() {
var click = document.getElementById("0");
if(click.style.backgroundColor == "transparent") {
click.style.backgroundColor = "red";
}
else {
click.style.backgroundColor = "transparent";
}
}
EDIT
to handle mutliple div
every div that you want the behaviour, should be like this (i.e. with the onclick(this))
<div style="background-color: transparent;" onclick="notclick(this)" id="0">
<div style="background-color: transparent;" onclick="notclick(this)" id="1">
<div style="background-color: transparent;" onclick="notclick(this)" id="2">
and the javascript should be
function notclick(ele) {
if(ele.style.backgroundColor == "transparent") {
ele.style.backgroundColor = "red";
}
else {
ele.style.backgroundColor = "transparent";
}
}
or better still
function notclick(ele) {
ele.style.backgroundColor = (ele.style.backgroundColor == "transparent" ? "red" :"transparent");
}

The problem is the method name click, inside the onclick handler it refers to the internal click method - fiddle - here click is a native method, not our method
Rename it and it should be fine - you need to use backgroundColor
<button onclick="testme()">Test</button>
then
function testme() {
var click = document.getElementById("0");
if (click.style.background == "red") {
click.style.background = "transparent";
} else {
click.style.background = "red";
}
}
Demo: Fiddle

Hiding / Showing Divs - initial state

Just having a bit of difficulty with showing/hiding divs -
Basically what I'm trying to achieve is to have 3 different links, each corresponding to three different divs, only one of which shows at any one time. I've referred to this tutorial - http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/ (section headed 'Here is a new demo in response to a request where only one div is displayed at any one time')
It's all working correctly, in that when I click any of my links, the correct div shows. The only problem I'm having is the initial state - I only want the first div to show initially, but currently they all display simultaneously, until I click one of the links.
I've copied the java on the website -
<script> function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
} </script>
My divs then have:
<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes">
<div id="newboxes3" class="newboxes">
These 3 divs all contain a number of other divs, none of which have 'newboxes' in the class - but perhaps this interferes?
The links sit outside of these 3 divs:
Learn HTMLBox2Box3
As far as I can see I've copied the method shown on the tutorial exactly, but for that my initial state doesn't work correctly, whereas it does on the tutorial page.
Any ideas?
Thanks!

function showonlyone(element){
for (var i=0; i<document.getElementsByClassName("newboxes").length; i++){
var div = document.getElementById('newboxes'+i);
if(i == element){
div.style.display = 'block';
}else{
div.style.display = 'none';
}
}
}
to use:
showonlyone(1);
//This will show the div with ID="newboxes1"

is it not as simple as
<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes" style="display:none;">
<div id="newboxes3" class="newboxes" style="display:none;">

Try this in your header
<script>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for (var x = 0; x < newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
} else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
Followed by this for the div boxes and links
<a id="myHeader1" href="javascript:showonlyone('newboxes1');">Wall Tiles</a>
- <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Floor Tiles</a>
- <a id="myHeader3" href="javascript:showonlyone('newboxes3');">Extras</a>
<div class="newboxes" id="newboxes1">
<iframe src="wall.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes2">
<iframe src="floor.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes3">
<iframe src="extras.php" width="600" height="620" frameborder="0"></iframe>
</div>