I have come up with this not very nice solution for having 7 buttons and information appearing in a div. However I would like the open div to close when a new button is clicked. also my solution is very repetition.
javascript code ...lengthy solution for accessing each div with each button...working separately
function myRoot() {
var x = document.getElementById("root");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function mySacral() {
var x = document.getElementById("sacral");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function mySolar() {
var x = document.getElementById("solar");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myHeart() {
var x = document.getElementById("heart");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myThroat() {
var x = document.getElementById("throat");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myBrow() {
var x = document.getElementById("brow");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myCrown() {
var x = document.getElementById("crown");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<script src="Myscript.js"></script>
<div class="chakra">
<button class="chbtn" onclick="myRoot()"><img src="Images/root.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="mySacral()"><img src="Images/sacral.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="mySolar()"><img src="Images/solar.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myHeart()"><img src="Images/heart.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myThroat()"><img src="Images/throat.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myBrow()"><img src="Images/brow.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myCrown()"><img src="Images/crown.png"></button>
</div>
</div>
<div class="pic-holder">
<h3>Chakra information</h3>
<div class="info" id="root"><img src="Images/root.png"> The root Chakra</br>
<p>Lorem </p>
<p>Lorem ipsum, dolor sit </p>
</div>
<div class="info" id="sacral"><img src="Images/sacral.png"> The sacral Chakra</br>
<p>Lorem blah blahipsum blah blah</p>
</div>
so.. here is a simple code to show how to proceed, with a small css part
var
Elm_Id_Block = '',
elms_xx = document.querySelectorAll('#elmsGroup > div')
;
// init
elms_xx[0].style.display = "block";
Elm_Id_Block = elms_xx[0].id;
document.querySelector("#buttonsGroup").onclick = function (e) {
if (!e.target.matches('button')) return;
e.stopPropagation();
let ref = e.target.dataset.ref;
if (ref != Elm_Id_Block) {
document.getElementById(ref).style.display = "block";
document.getElementById(Elm_Id_Block).style.display = "none";
Elm_Id_Block = ref;
}
}
#elmsGroup>div {
display: none;
width: 300px;
height: 30px;
padding: 5px;
border: 1px solid lightblue;
margin: 5px;
}
<div id="buttonsGroup">
<button data-ref="elm-A">A</button>
<button data-ref="elm-B">B</button>
<button data-ref="elm-C">C</button>
<button data-ref="elm-D">D</button>
<button data-ref="elm-E">E</button>
</div>
<div id="elmsGroup">
<div id="elm-A"> elm-A </div>
<div id="elm-B"> elm-B </div>
<div id="elm-C"> elm-C </div>
<div id="elm-D"> elm-D </div>
<div id="elm-E"> elm-E </div>
</div>
Related
I have two div with different content. In page reload i would to have one DIV content to display as defualt however by clicking on button the content should change in same DIV content area and the another button also need disable. here is my code Im able to show and hide text but by defualt both text is displayed also both button are active.
enter image description here
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
document.getElementById('btn').disabled = 'disabled';
y.style.display = "none";
}
}
function myFunction1() {
var y = document.getElementById("myDIV1");
if (y.style.display === "none") {
y.style.display = "block";
} else {
y.style.display = "none";
}
}
</script>
<button class="btn btn-primary about" id="btn" onclick="myFunction()">Base Solution</button>
<button class="btn btn-primary about" onclick="myFunction1()">Augmented Solution</button>
<div class="col-md-6" id="myDIV">
<ul class="custom">
<li>Automation of the elementary CITES permit procedures</li>
<li>Transparency and accountability in the permit process</li>
</ul>
</div>
<div class="col-md-6" id="myDIV1">
<ul class="custom">
<li>Integration and maintenance of a database of registered facilities</li>
<li>Extension of national eCITES reporting Automation of other processes to support various business models and national legislations</li>
</ul>
</div>
I tweaked your code a little bit
i've given id to the second button,and merged the two function to one
Link : https://jsfiddle.net/guz2de7h/2/
<button class="btn btn-primary about" id="btn" onclick="myFunction(this)">Base Solution</button>
<button class="btn btn-primary about" id="btn2" onclick="myFunction(this)">Augmented Solution</button>
document.getElementById('btn').disabled = 'disabled';
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV1");
y.style.display = "none";
function myFunction(btn) {
var btnid = btn.id;
if(btnid=="btn2")
{
x.style.display = "none";
y.style.display = "block";
document.getElementById('btn2').disabled = 'disabled';
document.getElementById('btn').disabled = false;
}
else
{
x.style.display = "block";
y.style.display = "none";
document.getElementById('btn').disabled = 'disabled';
document.getElementById('btn2').disabled = false;
}
}
I want my function(dropFunction(), which makes the div #dropdownList appear) to run on the first click of my button(#drop-btn), however, I must click it twice for the function to run, but only the first time. After this first double click, it runs as it should. How do I make it so it runs on the first click, rather than the second this first time?
CSS:
function dropFunction() {
var x = document.getElementById("dropdownList")
if (x.style.display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList">
Link 1
Link 2
Link 3
</div>
</div>
You have to use window.getComputedStyle(x) to get the value from the CSS
function dropFunction() {
var x = document.getElementById("dropdownList")
if (window.getComputedStyle(x).display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList">
Link 1
Link 2
Link 3
</div>
</div>
You can use 2 solutions.
1.
if(x.style.display === "none")
=>
if(window.getComputedStyle(x).display === "none")
or
2.
<div id="dropdownList">
=>
<div id="dropdownList" style="display: none;">
function dropFunction() {
var x = document.getElementById("dropdownList")
if (window.getComputedStyle(x).display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList">
Link 1
Link 2
Link 3
</div>
</div>
function dropFunction() {
var x = document.getElementById("dropdownList")
if (x.style.display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList" style="display:none;">
Link 1
Link 2
Link 3
</div>
</div>
I'm trying to make a container with 4 buttons in it and I wan't to toggle them between each other. Currently toggle is works when I double click the button (1click - show, 2click -hide) But when I click another button with toggle option the button shows information about another one.
How i can make button toggle when i click another button but not the same one.
<div class="newsFeedButtons">
<button class="btn" id="searchbtn" onclick="searchFeed()">Search</button>
<button class="btn" id="cryptobtn" onclick="cryptoFeed()">Crypto</button>
<button class="btn" onclick="twitterFeed()">Twitter</button>
</div>
<div id="twitterDIV" style="display: none;">
<a class="twitter-timeline" data-width="550" data-
height="400" href="https://twitter.com/Bitcoin?
ref_src=twsrc%5Etfw">Tweets by Bitcoin</a>
<script async
src="https://platform.twitter.com/widgets.js" charset="utf-8">.
</script>
</div>
<div class="row">
<div id="newsResult"></div>
</div>
JavaScript code:
function twitterFeed() {
var x = document.getElementById("twitterDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
$(function() {
$("form").submit(function() {
return false;
});
});
function searchFeed() {
var x = document.getElementById("newsResult");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
$(function() {
$("form").submit(function() {
return false;
});
});
A kind of simple toggling you can use on other elements, too:
function showContent() {
$('[data-show]').each(function(e) {
var thisButton = $(this);
var thisTarget = $( thisButton.data('show') );
thisTarget.toggleClass('active', thisButton.hasClass('active'));
});
};
showContent();
$('[data-show]').on('click', function(e) {
e.preventDefault();
var thisButton = $(this);
thisButton.siblings().removeClass('active');
thisButton.addClass('active');
showContent();
});
.newsFeedButtons .active {
border-color: red;
}
.newsFeedContent > div {
display: none;
}
.newsFeedContent > div.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsFeedButtons">
<button class="btn active" data-show="#searchDiv">Search</button>
<button class="btn" data-show="#cryptoDIV">Crypto</button>
<button class="btn" data-show="#twitterDIV">Twitter</button>
</div>
<div class="newsFeedContent">
<div id="searchDiv">Search...</div>
<div id="cryptoDIV">Crypto...</div>
<div id="twitterDIV">Twitter...</div>
</div>
Also on JSFiddle
Explanation
Everytime when you click a button it display a particular div to block.
But when you click other button previous div style remains display:block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="newsFeedButtons">
<button class="btn" id="searchbtn" onclick="searchFeed()">Search</button>
<button class="btn" id="cryptobtn" onclick="cryptoFeed()">Crypto</button>
<button class="btn" id="twitterbtn" onclick="twitterFeed()">Twitter</button>
</div>
<div id="twitterDIV" style="display: none;">
<a class="twitter-timeline" data-width="550" data-
height="400" href="https://twitter.com/Bitcoin?
ref_src=twsrc%5Etfw">Tweets by Bitcoin</a>
</div>
<div class="row">
<div id="newsResult" style="display:none">News result div</div>
</div>
<div class="row">
<div id="cryptoDIV" style="display:none">Crypto div</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function twitterFeed() {
var x = document.getElementById("twitterDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
document.getElementById("newsResult").style="display:none";
document.getElementById("cryptoDIV").style="display:none";
}
$(function() {
$("form").submit(function() {
return false;
});
});
function searchFeed() {
var x = document.getElementById("newsResult");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
document.getElementById("twitterDIV").style="display:none";
document.getElementById("cryptoDIV").style="display:none";
}
function cryptoFeed() {
var x = document.getElementById("cryptoDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
document.getElementById("twitterDIV").style="display:none";
document.getElementById("newsResult").style="display:none";
}
$(function() {
$("form").submit(function() {
return false;
});
});
</script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
I've been working on a small notebook app that works on the browser, my problem is that if i typed a note like this:
*hello
this is my first note
the app show it like this:
hello this is my first note
I also want the elements with id's of header and footer to be shown even when i scroll down or up (sth like setting posiotion to fixed but this doesn't work for me).
here is a link to the project to see the codes and try it. Codepen
you have to replace linebreaks and whitespaces with html like
note.value.replace(/\n/g, '<br>\n').replace(/\s/g,' ');
and add it to the innerHTML of the <li> instead of creating a textnode.
li.innerHTML = show;
Take a look at my example:
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");
let mynotes = {};
let i = 0;
add.addEventListener('click', function() {
main.style.display = "block";
submit.style.display = "inline";
cancel.style.display = "inline";
add.style.display = "none";
screen.style.display = "none";
del.style.display = "none";
back.style.display = "none";
});
submit.addEventListener('click', function() {
if (note.value) {
newNote = note.value.replace(/\n/g, '<br>\n').replace(/\s/g,' ');
if (newNote.length > 50) {
show = newNote.substring(0, 46) + "...";
} else {
show = newNote;
}
if (mynotes.hasOwnProperty(show)) {
show = show + `${++i}`;
}
mynotes[show] = newNote;
var li = document.createElement("li");
li.setAttribute('class', 'item');
li.innerHTML = show;
ul.appendChild(li);
note.value = "";
} else {
alert("can't add empty note");
}
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
cancel.style.display = "none";
add.style.display = "inline";
del.style.display = "none";
back.style.display = "none";
});
ul.addEventListener('click', function(event) {
node = event.target;
item = event.target.innerHTML;
text.innerHTML = mynotes[item];
fullnote.style.display = "block";
main.style.display = "none";
submit.style.display = "none";
add.style.display = "none";
screen.style.display = "none";
cancel.style.display = "none";
del.style.display = "inline";
back.style.display = "inline";
});
del.addEventListener('click', function() {
ul.removeChild(node);
delete mynotes[item];
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
});
cancel.addEventListener('click', function() {
note.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
del.style.display = "none";
back.style.display = "none";
cancel.style.display = "none";
})
back.addEventListener('click', function() {
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
});
#container {
background-color: rgb(253, 248, 177);
}
#header,
#footer {
z-index: 2;
}
#title {
color: white;
padding-top: 7px;
}
#cancel,
#submit,
#back {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete,
#cancel,
#submit {
display: none;
}
#main {
display: none;
}
#note {
resize: none;
}
#fullnote {
display: none;
}
#back {
display: none;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
<button type="button" class="btn" id="back">↩</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- Screen list show -->
<div class="row" id="screen">
<div class="col-12">
<ul id="list">
</ul>
</div>
</div>
<!-- Note show -->
<div class="row" id="fullnote">
<div class="col-12">
<p id="text">
</p>
</div>
</div>
<!-- textarea -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
</div>
</div>
<!-- footer -->
<div class="row align-items-end" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">+</h4></button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>
You either have to convert the newlines to br's:
str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');
Or you can do this with css:
.text, .item {
white-space: pre-wrap;
}
I am trying to initially hide MyDiv. Then it is revealed on the click with toggle functions. However, I cannot initially hide it.
<button onclick="myFunction()">Click Me</button>
This is my DIV element.
<script>function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Here is a better way:
CSS
.hide{
display: none;
}
HTML
<button onclick="myFunction()">Click Me</button>
<div id="my_div" class="hide"></div>
JS
function myFunction() {
var myDiv = document.getElementById('my_div');
myDiv.classList.toggle("hide");
}
This works!
var x = document.getElementById('myDIV');
function myFunction() {
if (x.style.display === 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
}
#myDIV{
display: none;
}
<button onclick="myFunction()">Click me</button>
<div id="myDIV">Hello world!</div>
Or you could do this (not much of a difference):
var x = document.getElementById('myDIV');
function myFunction() {
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<button onclick="myFunction()">Click me</button>
<div id="myDIV" style='display: none'>Hello world!</div>
EDIT :
This way you can send the div's ID to the function:
function myFunction(id) {
var x = document.getElementById(id);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<button onclick="myFunction('myDIV')">Click me</button>
<div id="myDIV" style='display: none'>Hello world!</div>
<br />
<button onclick="myFunction('myDIV2')">Click me</button>
<div id="myDIV2" style='display: none'>Hello world!</div>
Try using CSS to hide it initially
<div id="myDIV" style="display: none;">Some DIV content</div>