Apologies in advance, I'm not terribly familiar with Javascript, but I do understand what this code is doing and why it is causing me this problem. I'm just not sure how to go about solving it AT all.
On my webpage I have an open/close dialogue toggle which is the parent div, the dialogue box is hidden upon the page loading. Within this dialogue box are more hidden divs for the dialogue options. Problem is, when one of the dialogue options is clicked, the script hides the entire dialogue box, preventing any of the dialogue options from being seen, because it can only show one div at a time, regardless of its parent or child status. When a div is clicked, all other divs are re-hidden.
I need the parent div to remain visible until the dialogue box toggle is clicked again. The individual choices DO need to hide/unhide when another choice is clicked.
Not sure if I should include any CSS here, it's just styling the dialogue box and its buttons within.
<div id="dialogue" style="display:none;">
<div class="room">
Room description here. What do you do?
<div class="buttons">
Pet the cat.
<br>
<div id="cat" style="display:none;">aw yeah kitty time</div>
Turn on the radio.
<br>
<div id="radio" style="display:none;">
<br>
audio file and tracklist here
</div>
</div>
</div>
</div>
<span class="toggle">
[Open/close dialogue.]
</span>
<script type="text/javascript">
var divs = ["cat", "radio", "dialogue"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
I probably need a third function here because currently all the toggles are grouped together, hence why they're interacting like this, but I don't have the first clue how to accomplish this. I have been looking and haven't found anything that seems to match my needs.
Made a few corrections to your HTML so the href does not refresh the page on click. Also added in a few attributes (aria-controls) to track which div the button controls. I added comments to the JavaScript. There are plenty of Aria attributes they typically help with accessibility but they are super useful for keeping track of things in HTML and passing information to JavaScript.
//create a function to handle the click that takes in the event as a argument
function handleClick(event) {
//find out which div the button controls
const ariaControls = event.currentTarget.getAttribute("aria-controls"),
//select the controlled div
controlledAria = document.getElementById(ariaControls);
// if the controlled div is cat
if (ariaControls === "cat") {
// hide the radio div
document.getElementById("radio").classList.add("hide");
// if the controlled div is radio
} else if (ariaControls === "radio") {
// hide the car div
document.getElementById("cat").classList.add("hide");
}
//toggle the hide div on the controlled div
controlledAria.classList.toggle("hide");
}
//select all the buttons
const buttons = document.querySelectorAll("button");
//for each button add an event listener when the button is clicked run the handle click function
buttons.forEach(button => button.addEventListener("click", handleClick))
.hide {
display: none;
}
<div id="dialogue" class="hide">
<div class="room">
Room description here. What do you do?
<div class="buttons">
<button aria-controls="cat">Pet the cat.</button><br>
<div id="cat" class="hide">aw yeah kitty time</div>
<button aria-controls="radio">Turn on the radio.</button><br>
<div id="radio" class="hide">audio file and tracklist here
</div>
</div>
</div>
</div>
<span class="toggle"><button aria-controls="dialogue">[Open/close dialogue.]</button></span>
Related
I am trying to trigger the visibility of a DIV via a button.
My code looks like this:
function myFunction() {
var moreText = document.getElementById("csrmore");
var x = document.getElementById("myDIV");
let ishidden = x.classList.contains("hidden")
if (ishidden == true) {
x.classList.remove("hidden");
x.classList.add("shown");
moreText.innerHTML = "Show less";
}
else {
x.classList.remove("shown");
x.classList.add("hidden");
moreText.innerHTML = "Show more";
}
}
div {
width: 100px;
height: 100px;
}
.hidden {
display:none
}
.shown {
display:block;
}
<button id="csrmore" onclick="myFunction()">
Show more
</button>
<div id="myDIV" class="hidden">
This is the triggerable content.
</div>
Fiddle: https://jsfiddle.net/6zxa0Lg2/
It works fine, however since I am a JS starter, I was wondering if this is bad practice or is it a totally fine piece of code?
Thanks for every help :)
Here's another way to go about it. Make it all relative. The button is clicked and the javascript finds the content associated to that button to show/hide. This way you don't need any ID tags and you can have as many show/hide buttons as you want on the page.
document.addEventListener('DOMContentLoaded', () => {
// after the page loads...
document.querySelectorAll('.csrmore').forEach(button => {
// find all the 'show more' buttons and for each one...
button.addEventListener('click', e => {
// when someone clicks this button
let content = e.target.closest('.container').querySelector('.content');
// find the content div associated with this button
content.classList.toggle('hidden');
// toggle on or off the content
e.target.innerText = content.classList.contains('hidden') ? 'Show more' : 'Hide';
// change the text of the button
})
})
})
div {
width: 100px;
height: 100px;
}
.hidden {
display: none
}
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>
<hr>
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>
This is a fine way to do this! This is not the solution I would not have come up with, but it is actually pretty clever. I would have thought to have done it by toggling TARGET.style.visibility to either "hidden" or "visible" when clicking the button. Again though, your code looks perfectly fine!
I'm using elementor for my wordpress site and I wish to have a button in a first div (section) that control if a second and separate div (section) is display or not. I've tried to use the checkbox hack but it's working only if the checkbox is in the div as the content https://css-tricks.com/the-checkbox-hack/
Is there a solution to use CSS or even javascript ? If you advice to me to use javascript I'll put in my function.php file and as I'm begginer in javascript can you please write all the function I have to implement into my function.php file.
Basically it means :
<div>button</div> <div>content to show and hide on click on the button</div>
Best regards,
Clément
You can use Jquery:
1-Put an id to your DIV
<div id = "btn_show"> button </div> <div id = "show"> content to show and hide on click on the button </div>
2-Call jquery to display it
$("#btn_show").click(function(){
$("#show").show();
//or
$("#show").hide();
});
And jquery you can call it with CDN
<script src="https://code.jquery.com/jquery-3.6.0.js"</script>
In javascript without any library this could be very easy but you need to put an id on your divand your button.
<div id="myButton">button</div>
<div id="myDiv">
content to show and hide on click on the button
</div>
Then you just add a script section like this : (it just need to be after your div and your button in the DOM)
<script>
var myDiv = document.getElementById('myDiv');
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', e => {
myDiv.classList.toggle('visible'):
});
</script>
And at last, you need a css like this:
.visible {
display: none;
}
Thanks for all of yours answers! Here what I use:
<button onclick="myFunctionopenclose()">Click Me</button>
<div id="myDiv" style="display:none;">content to hide and show</div>
<script> function myFunctionopenclose() {
var x = document.getElementById("myDiv");
if (x.style.display === "block") {
x.style.display = "none"; }
else {
x.style.display = "block";}}
Best regards,
Clément
Can you help me to make the first div show on page load?
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
.tabContent {
display:none;
}
<div tabindex="1" class="tabs"><div id="tabs1" onclick="showStuff(this)">CARATTERISTICHE</div><div class="triangle-down-tab"></div></div>
<div id="tabs2" onclick="showStuff(this)">DESTINATARI</div><div class="triangle-down-tab"></div></div>
<div tabindex="3" class="tabs"><div id="tabs3" onclick="showStuff(this)"><i class="fa fa-calendar" style="color:#000000;"></i> CALENDARIO</div><div class="triangle-down-tab"></div></div>
<a name="contenuto"><hr></a>
<div id="tabs-1" class="tabContent">
<p>tab 1</p>
</div>
<div id="tabs-2" class="tabContent">
<p>tab 2 tab 2 </p>
</div>
<div id="tabs-3" class="tabContent">
<p>tab 3 tab 3 tab 3</p>
</div>
This is my actual code. jsFiddle
Thanks!
You could try running a function when the document is ready.
$(document).ready(function () {
showTab("tabs-1");
function showTab(divId) {
//Get the element
var divElement= document.getElementbyId(divId);
//Set the css property "display" from "none" to be "block";
divElement..style.display = "block";
}
}):
The function should run once the page has fully loaded.
Let me know how it goes.
I sure can. When you do this kind of stuff best use css. That way when the dom loads the css will kick in and your desired effect will show.
Further more its easier to understand and easier to code up.
.tabContent {
display:none;
}
.tabContent.active {
display:block;
}
Then in the HTML
<div id="tabs-1" class="tabContent active">
So when the page loads tab one is active
Then in your JS
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].className="tabContent";
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).className="tabContent active";
}
Updated fiddle!
https://jsfiddle.net/rb5c5095/3/
We could improve things since we know all the tabs will be made invisible at boot up and tab 1 will show. So when a tab is clicked we could just search the tab who has .active class and remove it, then apply the .active class to the new tab. This would have the benefit that any extra css you add in your html markup would not be removed by the JS code, but i reckon you can work that out and if you can't get back to me i can show you :-)
Here I am invoking the function (upon page load) that tweaks the css of the desired block;
Same can be achieved by $(document).ready;
I took this approach to avoid jquery;
window.onload = showDivOne();
function showDivOne() {
document.getElementById("tabs-1").style.display = "block";
}
I have a minimize button which sets the visibility of the selection to 'hidden'.
I also have a maximize button which sets the visibility of the selection to 'visible'.
Now I want to do this with only one button, but be able to pass through different selections to the function this button calls.
I can easily do this if I was only using the function on one object. For example, I would create a variable, say, hidden=false. Once I click the button it would check what hidden is equal to. If it is true then it would show the selection then change it to false. If it is false, it would hide the selection and change it to true.
Now I want to do this so I can pass objects through to one function and for that function to then check what the hidden value for that selection is.
I want to make a function as I want to be able to re-use this code, rather than having to do alot of if statements everytime I want to show/hide something.
What I have already.
//Pseudo code of buttons
MinimizeButton = onClick(hideThis(selection1));
MaximizeButton = onClick(ShowThis(selection1));
function hideThis(selection){
selection.classed("hidden", true);
}
function showThis(selection){
selection.classed("hidden", false);
}
.hidden{
visibility:hidden;
}
I want to be able to do this with one button rather than two as I have at the moment
I would use a class on the buttons (button.toggle) and a data attribute holding the selector of elements to modify.
function toggleBySelector() {
var target = $(this).data("selector");
$(target).toggle();
}
$("button.toggle").on("click", toggleBySelector);
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
<button class="toggle" data-selector="#single">Toggle Single</button>
</div>
<div>
<button class="toggle" data-selector=".red">Toggle Red</button>
</div>
</div>
<div>
<div class="red">Red Div</div>
<div id="single">Single Div</div>
<div class="red">Additional Red Div</div>
</div>
This binds the template to itself (or potentially other templates), but allows you to keep your DOM and script largely separate. Each button knows what elements it should toggle, using a jQuery selector in the data-selector attribute.
Using jQuery's toggle method, you don't need to keep track of which elements are shown or hidden, it will handle that for you.
A general approach:
function generalHideOrShow(element)
{
if (element instanceof Element)
{
//single element passed
element = [element]; //mimic node list
}
if(element.length && element.length > 0 && element[0] instanceof Element)
{
//node list
for (var i = 0; i < element.length; ++i)
{
if (element[i].getAttribute("data-hidden") == "true" )
{
$(element[i]).removeClass("hidden");
element[i].setAttribute("data-hidden", false);
}
else
{
element[i].setAttribute("data-hidden", true);
$(element[i]).addClass("hidden");
}
}
}
else
{
return false;
}
}
$("#button1").click(function(){
generalHideOrShow($("div"));
});
$("#button2").click(function(){
generalHideOrShow($("span"));
});
$("#button3").click(function(){
generalHideOrShow(document.body.querySelectorAll("span:nth-child(odd)"));
});
.hidden{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>test div 1</div>
<div>test div 2</div>
<div>test div 3</div>
<div>test div 4</div>
<span>test span 1</span>
<span>test span 2</span>
<span>test span 3</span>
<span>test span 4</span>
<br />
<button id="button1">Click to toggle the divs</button>
<button id="button2">Click to toggle the spans</button>
<button id="button3">Click to toggle the even spans</button>
To use:
generalHideOrShow( $("divs") );
That will give an array of elements to the function.
This function will work with an element (passed with document.getElementById("element") for example), a Node list (passed with document.querySelectorAll("div") for example) and jQuery selectors.
I am using jQuery to hide / show sections of content on a page. On one page, I have two such sections. Right now the page loads with both hidden. I need the page to load with the first div visible and the second one hidden.
Here is my javascript:
function a2012() {
var ele = document.getElementById("toggleArch12");
var text = document.getElementById("displayArch12");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "2012 Newsletter Archive";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Archive";
}
}
function a2011() {
var ele = document.getElementById("toggleArch11");
var text = document.getElementById("displayArch11");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "2011 Newsletter Archive";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Archive";
}
}
and the HTML to set up the DIVs and their toggle links:
<a id="displayArch12" href="javascript:a2012();">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>
<a id="displayArch11" href="javascript:a2011();">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>
I tried changing style="display:none" for the first div to style="display:visible" and while it does cause the page to load with the contents visible, the toggle link still shows the "click to open" text (in this case "2012 Newsletter Archive").
I need the first div to load visible and the correct toggle text (Hide Archive) to show as well. Any ideas?
If you want to use jQuery (which you are not from the code you've posted), you could write it like this:
$("#displayArch11").click(function(e) {
var $display = $(this)
$display.next().toggle(function() {
$display.html($display.html() == "2011 Newsletter Archive" ? "Hide Archive" : "2011 Newsletter Archive");
});
e.preventDefault();
});
$("#displayArch12").click(function(e) {
var $display = $(this)
$display.next().toggle(function() {
$display.html($display.html() == "2012 Newsletter Archive" ? "Hide Archive" : "2012 Newsletter Archive");
});
e.preventDefault();
});
and the HTML like this
<a id="displayArch12" href="#">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>
<a id="displayArch11" href="#">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>
This is easier if you use jQuery, but I think simply setting the correct default html should achieve your goal.
<a id="displayArch12" href="javascript:a2012();">Hide Archive</a>
<div id="toggleArch12" style="display:block">content goes here</div>
Change the inline script:
<div id="toggleArch12" style="display:block">content goes here</div>
First, if you want one of the divs to be visible, just don't specify the display property. They are visible by default. Though the value you are looking for with a div is display:block;
I would use a div instead of a link for your toggling needs.
<div id="displayArch12" class="toggleDiv">
2012 Newsletter Archive
<div id="toggleArch12" style="display:block;">Content Here</div>
</div>
<div id="displayArch11" class="toggleDiv">
2011 Newsletter Archive
<div id="toggleArch11" style="display:none;">Content Here</div>
</div>
Then you need some real jQuery to toggle them properly.
$(function() {
$(".toggleDiv").click(function () {
$("div:first-child", this).toggle();
});
});
That should work for you. And of course don't forget to include the jQuery library itself. The easiest way is to use the Google API link.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>