function tab_menu(){
if (buttonObject.value == value){
document.getElementById("div1").style.display = "block";
}
}
i was trying when click to buttons check Button Value and show a div based on Button's Value and hide others divs it should show just one div at same time. I wonder there is a javascript Master who can solve this problem.
SCRIPT:
function tabmenu(buttonObject){
var value = buttonObject.value
var target = document.getElementById(value);
if(target) {
var siblings = target.parentNode.getElementsByTagName("DIV");
for(i=0;i<siblings.length;i++){
siblings[i].style.display = "none";
}
target.style.display = "block";
}
}
HTML:
<div>
<div id="tab1">Tab1</div>
<div id="tab2">Tab2</div>
<div id="tab3">Tab3</div>
</div>
<button onclick="tabmenu(this);" value="tab1">Tab1</button>
<button onclick="tabmenu(this);" value="tab2">Tab2</button>
find the tab to activate (assuming value = tab.id)
find the parent and hence it's siblings (assuming they are DIVs)
hide the siblings
show the target
You can see it working here: http://jsfiddle.net/4rWdQ/
Related
I had this case where I remove the elements by using document.getElementById to target whom to be used, then remove it by doing element.remove(). I only wanted to add it back for me to use the classList.toggle again
p.s. 'test' and '.settings-menu' are on the same div, I only used id and class and only wanted to know how to return the elements back after removing, I also specifically wanted to use el.remove() rather than classList.remove() for a specific purpose.
var el = document.getElementById('test');
let settingsmenu = document.querySelector (".settings-menu");
function removeClass(){
el.remove();
}
function addclass(){
settingsmenu.classList.toggle()
}
This example offers 4 different solutions:
When the page loads, the load event is triggered, adding the child <div> element to the page.
Clicking the "Toggle Element" button will show/hide the child <div> element.
Clicking the "Toggle Class" button will add/remove the customStyle class style to the child <div> element.
Clicking the "Remove Element" button removes the child <div> element from the page.
Clicking the "Add Element" button will add the child <div> element to the page.
var toggleElementButton = document.getElementById('toggleElement');
var toggleClassButton = document.getElementById('toggleClass');
var removeClassButton = document.getElementById('removeClass');
var parentContainer = document.getElementById('parent');
/* HTML element to add dynamically. */
var element = `<div id="test" class="customStyle" style="display: block;">TEST</div>`;
/* The dynamic element is added to the page when the page loads. */
window.addEventListener('load', (event) => {
parentContainer.innerHTML += element;
});
/* Clicking the "Toggle Element" button will show/hide the item. */
toggleElementButton.addEventListener("click", function(){
var currentElement = document.getElementById('test');
if(document.getElementById('test').style.display == "none")
currentElement.style.display = "block";
else
currentElement.style.display = "none";
});
/* Clicking the "Toggle Class" button adds/removes the class style. */
toggleClassButton.addEventListener("click", function(){
document.getElementById('test').classList.toggle("customStyle");
});
/* Clicking the "Remove Element" button removes the item. */
/* When the "Add Element" button is clicked, the item is added. */
removeClassButton.addEventListener("click", function(){
if(removeClassButton.innerHTML == "Remove Element")
{
document.getElementById('test').remove();
removeClassButton.innerHTML = "Add Element";
toggleElementButton.disabled = true;
toggleClassButton.disabled = true;
}
else if(removeClassButton.innerHTML == "Add Element")
{
parentContainer.innerHTML += element;
removeClassButton.innerHTML = "Remove Element";
toggleElementButton.disabled = false;
toggleClassButton.disabled = false;
}
});
.container{
margin-top: 10px;
}
.customStyle{
border: 1px solid red;
}
<button id="toggleElement">Toggle Element</button>
<button id="toggleClass">Toggle Class</button>
<button id="removeClass">Remove Element</button>
<div id="parent" class="settings-menu container">
<!-- The item is dynamically added and removed here. -->
</div>
An easier way is to use hidden:
var el = document.getElementById('test');
let settingsmenu = document.querySelector(".settings-menu");
function hideElem() {
el.hidden = true
}
function showElem() {
el.hidden = false
}
<button onclick="hideElem()">Hide TEST</button>
<button onclick="showElem()">Show TEST</button>
<div class="settings-menu">
<div id="test">TEST</div>
</div>
I have something that is likely simple, but I'm struggling :/
I am trying to show a hidden div if the parent element is 'checked' (it is not a checkbox, but we're adding checked to the div if it's clicked on). Here's a screenshot of what the checked looks like in my local environment (screenshot attached).
Here's the code with the div 'checked' and I suspect this should make the hidden div show, but it is not.
Here's the guide I'm following, and the code example below: https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp
var checkBox = document.getElementById("accordionButton");
// Get the output text
var text = document.getElementById("accordionContent");
// If the element is checked, display the accordion content
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
<body>
<div id="accordionButton" checked> <!-- here is where when check is true, I want to show accordion content -->
<p>
<span>Migrate from another platform</span>
</p>
<div id="accordionContent">
option 1 option 2 option 3 option 4
</div>
</div>
</body>
Thank you all for your input. I tried various combinations from your feedback, but they didn't have the effect I was looking for.
Here's what I ultimately ended up with. If there's a better way to write this please let me know. This works in the live environment where the checkbox attribute can be toggled.
I appreciate your help!
document.body.addEventListener('click', function(e){
var button = document.getElementById("accordionButton"); // Get the clickable div
var text = document.getElementById("accordionContent"); // Get the hidden div
// If the checkbox is checked, display the output text
if (button.getAttribute("checked") === null) {
text.style.display = "none";
} else {
text.style.display = "block";
}
});
#accordionContent {
display: none;
}
<div id="accordionButton" checked>
<p>
<span>Migrate from another platform</span>
</p>
<div id="accordionContent">
option 1 option 2 option 3 option 4
</div>
</div>
I have two buttons defined with their IDs : but-toggle, but-close for show hide a panel :
<button id="but-toggle">Panel</button>
<div id="main-panel" style="display:none">
<button id="but-close">X</button>
<!-- some panel data -->
</div>
Now i have a JS function which toggle the panel (show/hide) assigned to but-toggle as following :
(function(){document.getElementById("but-toggle").addEventListener("click",function(){
var pan = document.getElementById("main-panel");
if(pan.style.display==="inline-block")
{pan.style.display="none"}
else
{pan.style.display="inline-block"}
});})();
My question is how to use the same function for both buttons without writing two func, one for each.
I want a solution for elements based on their ids, since the classes are differents and can't use getElementByClass for this
Thanks
You can use document.querySelector to get a list of elements from a list of IDs:
function toggleFn() {
const pan = document.getElementById("main-panel");
if(pan.style.display === "inline-block") {
pan.style.display = "none";
} else {
pan.style.display = "inline-block";
}
}
document.querySelector("#Id1, #Id2")
.forEach(elem => elem.addEventListener(toggleFn);
You can use the below to get all buttons
var btns=document.getElementsByTagName('button');
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
//code
});
}
(OR)
if you use input tag with type button
document.querySelectorAll("input[type=button]");
(OR)
Based on multiple IDs
document.querySelectorAll('#id1, #id2, #id3');
then you can add eventListener
I have created an HTML page that uses bootstrap CSS. I have a sidebar list which is actually a list of links.
Update table
I have a number of sections in the HTML which is hidden by default by applying CSS like below.
<section id="ut" style="display:none;">
I want to change the content when i click the links in the sidebar. What I've used here is JavaScript that sets the CSS display of the clicked link's section to block. For easier manipulation I remove the "ID" part from id of the link to get the id of the section
Eg: link=utID , section= ut
Given below is the JavaScript that I've used. Is there a better optimized method to do this?
// On clicking any of the side bar links
$('.list-group-item')
.click(function(event){
// Preventing the default action which may mess up the view
event.preventDefault();
// Getting all the anchor ids
var $a1 = document.getElementById("unfID");
var $a2 = document.getElementById("uiID");
var $a3 = document.getElementById("utID");
// Getting all the section ids
var $d1 = document.getElementById("unf");
var $d2 = document.getElementById("ui");
var $d3 = document.getElementById("ut");
// Store the id of the clicked link
var $clickedLink = $(this).attr('id');
// Storing the id of the corresponding Div by slicing of "ID" from the link's last part
var $clickedLinkDiv = $clickedLink.substring(0,$clickedLink.length-2);
// Setting the selected link active
SetLinkActive(document.getElementById($clickedLink))
// Setting the corresponding section visible
SectionVisibility(document.getElementById($clickedLinkDiv));
// Method to set the visibility of the section
function SectionVisibility(div){
// first hides al section
$d1.style.display = "none";
$d2.style.display = "none";
$d3.style.display = "none";
// then displays only the selected section
div.style.display = "block";
}
// Method to set the visibility of the section
function SetLinkActive(div){
// first deselect all links
$a1.className = "list-group-item";
$a2.className = "list-group-item";
$a3.className = "list-group-item";
// then applies selection to only the selected link
div.className = "list-group-item active";
}
});
Using jquery is much easier!
The example
HTML
Update UNF
Update UI
Update UT
<section class="unf" style="display:none;">
UNF SECTION
</section>
<section class="ut" style="display:none;">
UI SECTION
</section>
<section class="ui" style="display:none;">
UT SECTION
</section>
JAVASCRIPT
// On clicking any of the side bar links
$('.list-group-item').click(function(event){
// Preventing the default action which may mess up the view
event.preventDefault();
$('a.list-group-item').removeClass('active');
$(this).addClass('active');
$('section').css('display', 'none');
$('section.' + $(this).attr('id')).css('display', '');
});
My Assignment: Hi! I am doing an assignment in school where I am supposed write code in Javascript in order to toggle visibility for the submenus each belonging to their own topmenu in a navigation bar for a webpage. The visibility should be set to hidden by default and should be shown when a topmenu is clicked on.
I know how to toggle visibility for ONE submenu belonging to a topmenu, but fail to make my code work for multiple elements. My HTML-code:
<a class="left_top1" onclick = "toggle()">Opinion</a><br>
<div class="left_submenu_1" style="display: none;">
<a class="left_sub1">Leaders</a><br>
<a class="left_sub1">Debates</a><br>
</div>
<br>
<a class="left_top2" onclick = "toggle()">Economy</a><br>
<div class="left_submenu_2" style="display: none;">
<a class="left_sub2">News</a><br>
<a class="left_sub2">Your Economy</a><br>
</div>
My Problem: The topmenus I speak of are "Opinion" and "Economy". The visibility of the div with the class "left_submenu_1" should be toggled when you click the topmenu "left_top1". Thus should the visibilily of the div with the class "left_submenu_2" be toggled when you click the topmenu "left_top2". This is what I fail to do. My Javascript code is so far:
function toggle() {
var e = document.querySelectorAll("div.left_submenu_1, div.left_submenu_2");
for (var i=0; i < e.length; i++) { // I know this will enable/disable the visibility for ALL elements selected from the querySelectorAll, which should NOT happen
if(e[i].style.display == "none") {
e[i].style.display = "block";
} else if(e[i].style.display == "block") {
e[i].style.display = "none";
}
}
}
Anyone who knows how to solve this issue of mine? I know there are errors in the for-loop (as I wrote next to it), but this is the best I can manage for now.
Please note: We are NOT allowed to use jQuery or to give the topmenus id:s, as the idea is to use one general function to toggle the visibility. Furthermore, the code which enables the toggle-function should be done in Javascript.
I would approach it by passing the class name of the div to be shown (or hidden) into the function to begin with.
HTML
<a class="left_top1" onclick = "toggle('.left_submenu_1')">Opinion</a>
Then in the function you can grab the element and toggle it's display state.
JavaScript
function toggle(qs) {
var e = document.querySelector(qs);
e.style.display = e.style.display === 'block' ? 'none' : 'block';
}
The e.style.display === 'block' ? 'none' : 'block' part is saying if the elements display state is equal to block, return none, otherwise return block.
The return value is set as the new element display state due to the e.style.display = beforehand.
Tring to make it work modifying it as less as possible :
- use onClick="toggle(this)" in the anchors tags
- use a bit different toggle function like:
function toggle (el) {
var e = document.querySelectorAll('.' + el.className.replace('top', 'submenu_'))[0];
e.style.display = e.style.display.match(/none/) ? '' : 'none';
}
hope it helps, but I have to suggest You to make a small step forward and search for event delegation. Bye