function showTodos(e) {
document.getElementById('modal_todos').style.display = "block";
}
function closeTodoDiv(e) {
document.getElementById('modal_todos').style.display = "none";
}
<div class=" modal modal-todos" id="modal_todos">
<button style="float: right; margin-top:3px;margin-right:8px;">x</button>
<button class="btn btn-secondary btn-sm">Add new Todo</button>
<h2>dfdfdf</h2>
<h2>dfdfdf</h2>
</div>
I can't close my popuped up div on button click.Can't understand why "none" is not working, though my showTodos() is working fine. Also the ID used in unique.
You need to attach a click event for the buttons using the onclick attribute.
function showTodos(e) {
document.getElementById('modal_todos').style.display = "block";
}
function closeTodoDiv(e) {
document.getElementById('modal_todos').style.display = "none";
}
* {
margin: 0;
}
.modal {
background-color: #ccc;
}
.o-btn {
position: absolute;
top: 0;
z-index: -1;
}
<div class="modal modal-todos" id="modal_todos">
<!-- added onclick="closeTodoDiv()" -->
<button style="float: right; margin-top:3px;margin-right:8px;" onclick="closeTodoDiv()">x</button>
<button class="btn btn-secondary btn-sm">Add new Todo</button>
<h2>dfdfdf</h2>
<h2>dfdfdf</h2>
</div>
<!-- button to open the modal. added onclick="showTodos()" -->
<button class="o-btn" onclick="showTodos()">open modal</button>
A modern and better approach is to use addEventListener method instead of the inline events and also to store a reference for the modal to improve performance.
const modal = document.getElementById('modal_todos'),
btnOpen = document.getElementById('open'),
btnClose = document.getElementById('close');
btnOpen.addEventListener('click', () => modal.style.display = 'block');
btnClose.addEventListener('click', () => modal.style.display = 'none');
* {
margin: 0;
}
.modal {
background-color: #ccc;
}
.o-btn {
position: absolute;
top: 0;
z-index: -1;
}
<div class="modal modal-todos" id="modal_todos">
<button style="float: right; margin-top:3px;margin-right:8px;" id="close">x</button>
<button class="btn btn-secondary btn-sm">Add new Todo</button>
<h2>dfdfdf</h2>
<h2>dfdfdf</h2>
</div>
<button class="o-btn" id="open">open modal</button>
You should use this logic using listeners on your buttons:
const $modalTodos = document.getElementById('modal_todos')
const $btnOpenModal = document.getElementById('btn-open-modal')
const $btnCloseModal = document.getElementById('btn-close-modal')
$btnOpenModal.addEventListener('click', showTodos)
$btnCloseModal.addEventListener('click', closeTodoDiv)
function showTodos() {
$modalTodos.style.display = "block";
}
function closeTodoDiv() {
$modalTodos.style.display = "none";
}
.modal {
display: none
}
<button id="btn-open-modal">open</button>
<div class=" modal modal-todos" id="modal_todos">
<button id="btn-close-modal" style="float: right; margin-top:3px;margin-right:8px;">x</button>
<button class="btn btn-secondary btn-sm">Add new Todo</button>
<h2>dfdfdf</h2>
<h2>dfdfdf</h2>
</div>
Related
I have three buttons
<button type="button" id="btn-Low" class="btn btn-success disabled">Green</button>
<button type="button" id="btn-Medium" class="btn btn-warning disabled">Orange</button>
<button type="button" id="btn-High" class="btn btn-danger disabled"></button>
I want to show an image for each of them if disabled get removed from there class.
Here are the images:
<img src="assets/media/logos/red.jpg" id="red" style="width: 250px; height: 250px; display: none" alt="" />
<img src="assets/media/logos/green.jpg" id="green" style="width: 250px; height: 250px; display: none" alt="" />
<img src="assets/media/logos/orange.jpg" id="orange" style="width: 250px; height: 250px; display: none" alt="" />
Here is what i tried:
<script>
var delta = document.getElementById("red");
if (document.getElementById('btn-High').disabled === false;) {
delta.style.display = "block";
} else {
delta.style.display = "none";
}
</script>
<script>
var omega = document.getElementById("green");
if (document.getElementById('btn-Low').disabled === false;) {
omega.style.display = "block";
} else {
omega.style.display = "none";
}
</script>
<script>
var alpha = document.getElementById("orange");
if (document.getElementById('btn-Medium').disabled === false;) {
alpha.style.display = "block";
} else {
alpha.style.display = "none";
}
</script>
Here is an approach:
Add the image you want to show inside of the button:
<button class="btn disabled">
<img src="..." />
Color
</button>
Then add some CSS to hide the image when the button has a class of .disabled:
.btn.disabled > img {
display: none;
}
Use JQuery hasClass, for the event use the same when the disabled class is removed.
https://api.jquery.com/hasclass/
if (! $( "#btn-Low" ).hasClass( "disabled" )){
$( "#red" ).show();
}
I am trying to step away from jsTree as this is not as much as configurable as having my own custom code. I am making use of Bootstrap to have a somewhat similar functionality as jsTree. I am also stepping away from jQuery (for now), because of debugging reasons.
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: 100%;
margin-left: 15px;
}
.flex {
display: flex;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--The generated html as example: -->
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
JSFiddle
I added a border in a .column-*-1 to allow for some spacing for the border:
The spacing however, I find a bit too much. How could I address this problem? I would like to refrain from styling Bootstrap's grid system (meaning I preferably would not want to touch any styling behind .col-* and .row classes etc.) because this might break the responsiveness or anything else related to Bootstrap.
Edit:
I also noticed that when adding a lot of buttons by just clicking them, the layout of tree will start failing as well. (I am aware this is a different question, so if I need to post another question regarding this problem, please do let me know) Is there a way I could address this so that the element works correctly?
Add this little CSS
#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
content: ' ';
position: absolute;
left: calc(-100% / 11 + 30px);
top: 2em;
border-top: 1px dashed #000000;
width: calc(100% / 5 - 15px);
}
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: 100%;
margin-left: 15px;
}
.flex {
display: flex;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
content: ' ';
position: absolute;
left: calc(-100% / 11 + 30px);
top: 2em;
border-top: 1px dashed #000000;
width: calc(100% / 5 - 15px);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--The generated html as example: -->
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
Here I have used absolute positioning and increased height by 5px which kind of makes it touches the next div element.
Here is the Fiddle Link
and the Code Snippet:
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: calc(100% + 5px);
margin-left: 20px;
position: absolute;
}
.flex {
position: relative;
display: flex;
}
.col-xs-11 .col-xs-12 {
padding-left: 0;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
I'm working on a VERY LIGHT survey application. This application runs in third world countries in locations with very limited connection.
We found that the loading-time is proportional to user Engagement (Very important to us).
Today I'm using 2 libs - VueJS and a custom bootstrap build. I would like to invoke a modal. But the modal requires to add the Bootstrap Javascript and the jQuery. those libs almost doubles the loading time.
How can I open a modal without adding those two libs?
#uday's link to CSS only modal is a nice trick, but might be awkward to use if you use #tag's for other purposes (eg, Routing & param passing).
So here is an example that uses very little JS to achieve something very similar. I've tried to keep the Snippet as small as possible so that it's easy to see what's happening.
var modal = document.querySelector(".modal");
var container = modal.querySelector(".container");
document.querySelector("button").addEventListener("click", function (e) {
modal.classList.remove("hidden")
});
document.querySelector(".modal").addEventListener("click", function (e) {
if (e.target !== modal && e.target !== container) return;
modal.classList.add("hidden");
});
.modal {
background-color: rgba(0,0,0,0.4); /* Transparent dimmed overlay */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table;
}
.modal.hidden {
display: none;
}
.modal .container {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
}
.modal .body {
box-shadow: 5px 10px #888888;
display: inline-block;
background-color: white;
border: 1px solid black;
padding: 10px;
}
<button>Show Modal</button>
<div class="modal hidden">
<div class="container">
<div class="body">
<p>Click outside this box to close the modal.<p>
<p>You could of course add a close button etc</p>
<p>But this is left for the OP todo</p>
</div>
</div>
</div>
You don't need any css style. You should create the bootstrap modal in your HTML, then in your js, you have to simply give it some style according to the following description:
var locModal = document.getElementById('locModal');
var btnclose = document.getElementById('w-change-close');
var btnShow= document.getElementById('w-change-location');
//show the modal
btnShow.addEventListener('click', (e) => {
locModal.style.display = "block";
locModal.style.paddingRight = "17px";
locModal.className="modal fade show";
});
//hide the modal
btnclose.addEventListener('click', (e) => {
locModal.style.display = "none";
locModal.className="modal fade";
});
The HTML should be like this:
<!-- Button trigger modal -->
<button id="w-change-location" type="button" class="btn btn-primary mt-3" data-toggle="modal" data-target="#locModal">
Change Location
</button>
<!-- Modal -->
<div class="modal fade" id="locModal" tabindex="-1" role="dialog" aria-labelledby="locModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="locModalLabel">Choose Location</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" id="w-form">
<div class="form-group">
<label for="city"> City</label>
<input type="text" class="form-control" id="city">
</div>
<div class="form-group">
<label for="state"> State </label>
<input type="text" class="form-control" id="state">
</div>
</form>
</div>
<div class="modal-footer">
<button id="w-change-close" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="w-change-btn" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
We write private code for our modal.
let modal = document.getElementById('our-modal');
let modalContentElm = modal.querySelector('.modal-content');
let allModalButtons = modal.querySelectorAll('.modal-footer > .btn');
let outerClick = true;
let openStyle = () => { //MODAL SHOW
modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
modal.style.display = 'block';
setTimeout(() => { modal.style.opacity = 1; }); //FOR TRANSITION
};
let closeStyle = () => { //MODAL HIDE
modal.style.display = 'none';
modal.style.opacity = 0;
};
//NO CLOSE MODAL WHEN YOU CLICK INSIDE MODAL
modalContentElm.onclick = () => {
outerClick = false;
};
//CLOSE MODAL WHEN YOU CLICK OUTSIDE MODAL
modal.onclick = () => {
if(outerClick){ closeStyle(); }
outerClick = true;
};
for(let btn of allModalButtons){
btn.onclick = () => {
closeStyle();
if(btn.getAttribute('id') === 'success-btn'){
//PLEASE WRITE 'success-btn' IN THE ID VALUE OF THE CONFIRM BUTTON
console.log('Click Yes');
}
else{
console.log('Click Cancel');
}
//..... more else if or else for more modal buttons
};
}
Whenever we want to open modal
openStyle();
Whenever we want to close modal on manuel
closeStyle();
It's a bit laborious, but it works. A more general class can be written.
If you are using bootstrap 5, you can easily show and hide modal with js:
Documentation
const myModal = new bootstrap.Modal(document.getElementById('myModal')); // creating modal object
myModal.show(); // show modal
myModal.hide(); // hide modal
If you open the modal using a button. you can add the bootstrap options to that button data-bs-toggle="modal" data-bs-target="#modalTarget" and also a onclick function like onclick="whenOpenModal();"
function whenOpenModal(){
console.log("modal opened");
}
I have a navbar and want to close it when clicking outside. The only thing I need to check is the click event of the body.
var navBtnActive = true;
function toggleMenu(){
navBtnActive = !navBtnActive;
$("#navContent").slideToggle();
}
$('body').click(function() {
// if( clicked target is NOT the menu ){
// if(navBtnActive){ // just if the menu is open
// toggleMenu();
// }
// }
});
#navContainer {
position: relative;
display: inline-block;
}
#navContent button {
display: block;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navContainer">
<button onclick="toggleMenu()">Menu</button>
<div id="navContent">
<button onclick="toggleMenu()">Slider</button>
<button onclick="toggleMenu()">Calculator</button>
<button onclick="toggleMenu()">Imageupload</button>
<button onclick="toggleMenu()">Settings</button>
<button onclick="toggleMenu()">Search</button>
<button onclick="toggleMenu()">Servercall</button>
</div>
</div>
As you can see below, my $('body').click(function() got the code for closing it. I just want to get a way checking if the clicked object is the menu itself or not. If not, close the menu.
Hi you can try this code
var navBtnActive = true;
function toggleMenu(e) {
navBtnActive = !navBtnActive;
$("#navContent").slideToggle();
}
jQuery(document).on('click', function() {
$("#navContent").slideUp();
});
jQuery('#navContainer').on('click', function(e) {
e.stopPropagation();
});
#navContainer {
position: relative;
display: inline-block;
}
#navContent button {
display: block;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navContainer">
<button onclick="toggleMenu()">Menu</button>
<div id="navContent">
<button onclick="toggleMenu()">Slider</button>
<button onclick="toggleMenu()">Calculator</button>
<button onclick="toggleMenu()">Imageupload</button>
<button onclick="toggleMenu()">Settings</button>
<button onclick="toggleMenu()">Search</button>
<button onclick="toggleMenu()">Servercall</button>
</div>
</div>
just check the click targer jQuery event targer
$('body').click(function(e){
var $elem = $(e.target);
if ($elem.attr('id') === 'my_nav_bar_id') {
doSomething();
}
});
Here you go with a solution https://jsfiddle.net/ap7m4xnu/
var navBtnActive = true;
$('#menuToggle').click(function(e){
e.stopPropagation();
navBtnActive = !navBtnActive;
$("#navContent").slideToggle();
})
$('body').not('#menuToggle').click(function(e) {
e.preventDefault();
$("#navContent").slideUp();
});
#navContainer {
position: relative;
display: inline-block;
}
#navContent button {
display: block;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navContainer">
<button id="menuToggle">Menu</button>
<div id="navContent">
<button onclick="toggleMenu()">Slider</button>
<button onclick="toggleMenu()">Calculator</button>
<button onclick="toggleMenu()">Imageupload</button>
<button onclick="toggleMenu()">Settings</button>
<button onclick="toggleMenu()">Search</button>
<button onclick="toggleMenu()">Servercall</button>
</div>
</div>
You can use the compareDocumentPosition method. You can read its documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
You can test if the clicked element is contained by the menu by doing the following:
var DOCUMENT_POSITION_CONTAINED_BY = 16;
if ((navContainer.compareDocumentPosition(clickedElement) & DOCUMENT_POSITION_CONTAINED_BY) !== 0) {
// clicked element is inside the menu
} else {
// clicked element is outside of the menu
}
In your example it would work like this:
var navBtnActive = true;
function toggleMenu(){
navBtnActive = !navBtnActive;
$("#navContent").slideToggle();
}
$('body').click(function(event) {
var DOCUMENT_POSITION_CONTAINED_BY = 16,
navContainer = document.getElementById('navContainer'),
compareResult = navContainer.compareDocumentPosition(event.target) & DOCUMENT_POSITION_CONTAINED_BY;
if (compareResult === 0) {
// clicked element is outside of the menu
toggleMenu();
}
});
#navContainer {
position: relative;
display: inline-block;
}
#navContent button {
display: block;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navContainer">
<button onclick="toggleMenu()">Menu</button>
<div id="navContent">
<button onclick="toggleMenu()">Slider</button>
<button onclick="toggleMenu()">Calculator</button>
<button onclick="toggleMenu()">Imageupload</button>
<button onclick="toggleMenu()">Settings</button>
<button onclick="toggleMenu()">Search</button>
<button onclick="toggleMenu()">Servercall</button>
</div>
</div>
function toggleMenu(){
$("#navContent").slideToggle();
}
$('body').click(function(e) {
if(document.querySelector('body')== e.toElement && $("#navContent").is(':visible')){
$("#navContent").slideToggle();
}
});
#navContainer {
position: relative;
display: inline-block;
}
#navContent button {
display: block;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navContainer">
<button onclick="toggleMenu()">Menu</button>
<div id="navContent">
<button onclick="toggleMenu()">Slider</button>
<button onclick="toggleMenu()">Calculator</button>
<button onclick="toggleMenu()">Imageupload</button>
<button onclick="toggleMenu()">Settings</button>
<button onclick="toggleMenu()">Search</button>
<button onclick="toggleMenu()">Servercall</button>
</div>
</div>
I am looking for a way to toggle through three stacked div's where a button press will trigger an onclick function to make that specific div visible and hiding the others. I have included a jsfiddle below with the code I currently have any help on this would be amazing!
function togglediv(id1, id2, id3) {
var idOne = document.getElementById(id1);
var idTwo = document.getElementById(id2);
var idThree = document.getElementById(id3);
idOne.style.display = idOne.style.display == "block" ? "none" : "block";
idTwo.style.display = idTwo.style.display == "none";
idThree.style.display = idThree.style.display == "none";
}
<div class="table-responsive">
<button type="button" class="btn btn-primary" onclick="togglediv('inner-dung', 'inner-boss', 'inner-item')">
Dungeon
</button>
<button type="button" class="btn btn-primary" onclick="togglediv('inner-boss', 'inner-dung', 'inner-item')">
Boss
</button>
<button type="button" class="btn btn-primary" onclick="togglediv('inner-item', 'inner-dung', 'inner-boss')">
Item
</button>
</div>
<div id="search-dung">
<div id="inner-dung">
DUNGEON
</div>
<div id="inner-boss">
BOSS
</div>
<div id="inner-item">
ITEM
</div>
</div>
JSFiddle
You can pass the ID you want to show to the function, use a CSS class to toggle display: none/block, toggle that class on the element you click on and hide the rest by removing the class.
.table-responsive {
margin: 0px auto;
width: 90%;
}
#search-dung {
margin: 0px auto;
width: 90%;
height: 50%;
background-color: white;
border: 1px solid red;
}
#inner-dung,
#inner-item,
#inner-boss {
position: absolute;
margin: 0px auto;
width: 90%;
height: 50%;
background-color: white;
border: 1px solid red;
display: none;
}
#inner-dung.show,
#inner-item.show,
#inner-boss.show {
display: block;
}
<div class="table-responsive">
<button type="button" onclick="togglediv('inner-dung')">
Dungeon
</button>
<button type="button" onclick="togglediv('inner-boss')">
Boss
</button>
<button type="button" onclick="togglediv('inner-item')">
Item
</button>
</div>
<div id="search-dung">
<div id="inner-dung">
DUNGEON
</div>
<div id="inner-boss">
BOSS
</div>
<div id="inner-item">
ITEM
</div>
</div>
<script>
var els = document.getElementById('search-dung').getElementsByTagName('div');
function togglediv(id) {
var el = document.getElementById(id);
for (var i = 0; i < els.length; i++) {
var cur = els[i];
if (cur.id == id) {
cur.classList.toggle('show')
} else {
cur.classList.remove('show');
}
}
}
</script>
function togglediv(id1, id2, id3) {
var idOne = document.getElementById(id1);
var idTwo = document.getElementById(id2);
var idThree = document.getElementById(id3);
idOne.style.display = "block";
idTwo.style.display = "none";
idThree.style.display = "none";
}
https://codepen.io/anon/pen/NjOpJw
a couple of of problems there.
use onClick rather than onclick
idOne.style.display = idOne.style.display == "block" ? "none" : "block"; will return a boolean so you should change it for this
idOne.style.display = "block";
set your javascript to load in the body.
here's a working version
https://jsfiddle.net/83qwrk70/1/
You can use a switch case, passing only the element you want to show in toggle div
//index.html
<button type="button" class="btn btn-primary" onclick="togglediv('inner-dung')">
Dungeon
</button>
<button type="button" class="btn btn-primary" onclick="togglediv('inner-boss')">
Boss</button>
<button type="button" class="btn btn-primary" onclick="togglediv('inner-item')">
Item </button>
//index.js
function show(el) {
el.style.display = 'block';
}
function hide(el) {
el.style.display = 'none';
}
function togglediv(selected) {
var idOne = document.getElementById('inner-dung');
var idTwo = document.getElementById('inner-boss');
var idThree = document.getElementById('inner-item');
switch(selected) {
case 'inner-dung': {
show(idOne);
hide(idTwo);
hide(idThree);
break;
}
case 'inner-boss': {
hide(idOne);
show(idTwo);
hide(idThree);
break;
}
case 'inner-item': {
hide(idOne);
hide(idTwo);
show(idThree);
break;
}
}
}
Here is another option that is scaleable:
var active = "inner-dung",
inactive = ["inner-boss", "inner-item"];
var toggleDiv = function (id) {
active = inactive.splice(inactive.indexOf(id), 1, active);
document.getElementById(active).style.display = "block"; // or use style sheet
for (var i = 0; i < inactive.length; i++) {
document.getElementById(inactive[i]).style.display = "none"; // or use style sheet
}
}
If there is no default active item, you can put "inner-dung" in the array as well. If you do that, the "inactive" array will receive "undefined" the first time, but it will not get in the way of the purpose.
You don't have to use a for-loop of course, but if you have more items you would.
"Teach your children well"
Apply a rule to the parent to influence the children.
document.querySelector( "form" ).addEventListener( "click", function( evt ) {
var n = evt.target.name;
if ( n ) {
document.querySelector( "#foobarbaz" ).setAttribute( "class", n );
}
}, false );
#foo,
#bar,
#baz {
display: none;
}
#foobarbaz.foo #foo,
#foobarbaz.bar #bar,
#foobarbaz.baz #baz {
display: block;
}
<div id="foobarbaz" class="foo">
<div id="foo">Foo!</div>
<div id="bar">Bar?</div>
<div id="baz">Baz.</div>
</div>
<form>
<input type="button" value="Foo" name="foo">
<input type="button" value="Bar" name="bar">
<input type="button" value="Baz" name="baz">
</form>