I would like to have a button that, when clicked, hides one element and shows another, and to have the button change text when clicked (I think I got this part). Also, I'd like to only display one of the elements upon loading the page, and when the button is clicked, to only display the other element. The code I am using currently almost accomplishes this correctly, but upon clicking the button, the hidden element is displayed (desired) but the other element that was displayed is not hidden. Here is my code (I am using basic JS, I don't want to use jQuery).
The HTML
<html>
<body>
<div>
<span>E-Mail or Phone<br>
</span>
<button onclick="emph()" id="emphbtn" type="button">Use Phone</button>
</div>
<div id="phbox" style="display: none;">
<label for="phone">Phone</label><input id="phone" type="tel" />
</div>
<div id="embox">
<label for="mail">E-Mail</label><input id="mail">
</div>
</body>
and the javascript
function emph() {
// get the clock
var myPhone = document.getElementById('phbox');
// get the current value of the clock's display property
var displaySetting = myPhone.style.display;
// also get the clock button, so we can change what it says
var switchbtn = document.getElementById('emphbtn');
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// clock is visible. hide it
myPhone.style.display = 'none';
// change button text
switchbtn.innerHTML = 'Use Phone';
}
else {
// clock is hidden. show it
myPhone.style.display = 'block';
// change button text
switchbtn.innerHTML = 'Use Email';
}
}
You also need to toggle your email input embox
function emph() {
// get the clock
var myPhone = document.getElementById('phbox');
var myEmail = document.getElementById('embox');
// get the current value of the clock's display property
var displaySetting = myPhone.style.display;
// also get the clock button, so we can change what it says
var switchbtn = document.getElementById('emphbtn');
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// clock is visible. hide it
myPhone.style.display = 'none';
myEmail.style.display = 'block';
// change button text
switchbtn.innerHTML = 'Use Phone';
} else {
// clock is hidden. show it
myPhone.style.display = 'block';
myEmail.style.display = 'none';
// change button text
switchbtn.innerHTML = 'Use Email';
}
}
<div>
<span>E-Mail or Phone<br></span>
<button onclick="emph()" id="emphbtn" type="button">Use Phone</button>
</div>
<div id="phbox" style="display: none;">
<label for="phone">Phone</label><input id="phone" type="tel" />
</div>
<div id="embox">
<label for="mail">E-Mail</label><input id="mail">
</div>
Related
I created two(2) sections.I want to hide a section by default, with a button under it that says “Show More”.
Something like this--- (https://www.livermoretreeremoval.com/tree-service-ulmar) under the "Ulmar Tree Services Top Sights" section.
If the button is clicked, the hidden Section should appear, and the button Text should change to “Show Less”.
If the Button is clicked again, the visible Section should become hidden again, and the Button Text should say “Show More”.
So when hidden, the button says “Show More”, and when visible the button says “Show Less”.
Here’s my JavaScript below:
`
function toggleBlock() {
// get the block
var myBlock = document.getElementById(‘service-area-two’);
// get the current value of the block’s display property
var displaySetting = myBlock.style.display;
// also get the block button, so we can change what it says
var blockButton = document.getElementById(‘Show More’);
// now toggle the block and the button text, depending on current state
if (displaySetting == ‘block’) {
// block is visible. hide it
myBlock.style.display = ‘none’;
// change button text
blockButton.innerHTML = ‘Show Less’;
}
else {
// block is hidden. show it
myBlock.style.display = ‘block’;
// change button text
blockButton.innerHTML = ‘Show More’;
}
}
`
The Section ID: service-area-two
The Button Name is: ToggleButton
I know I’m doing a lot of things wrong.
How can I get this button to work?
So as for the button, the show more and show less is not working is what I understood. I think the mistake here is innerHTML. innerHTML means the actual HTML inside the block like for example:
button.innerHTML = '<img src="---'">'
Finally, change innerHTML to innerText.
Use the hidden attribute.
So:
<div hidden id="service-area-two">
// content
</div>
<button id="Show More" onclick="toggleBlock()">Show more</button>
And the JavaScript logic like this:
function toggleBlock() {
var myBlock = document.getElementById("service-area-two");
var blockButton = document.getElementById("Show More");
if (myBlock.hidden) {
blockButton.innerHTML = "Show Less";
myBlock.hidden = false;
} else {
blockButton.innerHTML = "Show More";
myBlock.hidden = true;
}
}
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'd like to create a page that allow users to create keys in a database. To do that, the user have first to choose between two buttons. Each button display a different form.
My problem is the next one : I can use ONE button that show ONE form. Here is the code from https://stackoverflow.com/a/16196022/12533349 :
HTML:
<button id="some_id">Hide div</button>
<form id="some_form">
<form>
javascript:
<script type="text/javascript">
var theButton = document.getElementById('some_id');
theButton.onclick = function() {
document.getElementById('some_form').style.visibility='hidden';
}
</script>
But what I would like to do is the next thing :
if the user click on button_a, it show form_a, if he clicks on button_b, but the form_a is displayed, the form_a is hidden and the form_b is displayed. I hope it's more or less understandable...
Before concluding this post, I'd like to add a precisition : I use BootStrap 4 to construct my webapp.
You could use something like this for it.
var form1 = document.getElementById('form1');
var form2 = document.getElementById('form2');
// Hide the two forms when the page loads
form2.style.display = "none";
form1.style.display = "none";
// Create a function that shows and hides the forms
function showForm(x){
if(x==1){ /* Check what form should be shown */
form1.style.display = "block";
form2.style.display = "none";
}else if(x==2) {
form1.style.display = "none";
form2.style.display = "block";
}
}
<button onclick="showForm(1)">Form 1</button><button onclick="showForm(2)">Form 2</button>
<form id="form1">
<h3>Form 1</h3>
Example 1: <input placeholder="Example"/>
</form>
<form id="form2">
<h3>Form 2</h3>
Example 2: <input placeholder="Example"/>
</form>
In the code above, I used style.display, but you could also use style.visibility.
You stopped in the middle of the work, you had almost reached the goal. :)
However, returning to us, I think it's more elegant to use a class to add and remove in this way:
let theButton = document.getElementById('btn_id');
let theButton2 = document.getElementById('btn_id_2');
let element = document.getElementById('some_form');
let element2 = document.getElementById('some_form_2');
theButton.onclick = function() {
if(element.classList.contains('hidden')) {
element.classList.remove('hidden');
element2.classList.add('hidden');
}
}
theButton2.onclick = function() {
if(element2.classList.contains('hidden')) {
element2.classList.remove('hidden');
element.classList.add('hidden');
}
}
Remember to write your .hidden class with visibility: hidden
I'm attempting to have a hidden div tag display when highlighting specific text. I was able to get a hidden div to display on highlighting but the 2 parts I cannot accomplish are:
Only show when highlighting specific text (I assume using a span tag id or something similar)
After the display has been changed to block, change it back to hidden after 5 seconds.
Here is my attempt. Again, this does show the hidden div on highlighting but that's as far as I got. Please help!
function ShowNote() {
document.getElementById('Note').style.display = 'block';
}
document.onmouseup = ShowNote;
if (!document.all) document.captureEvents(Event.MOUSEUP);
function HideNote() {
document.getElementById('Note').style.display = 'hidden';
}
setTimeout("HideNote()", 5000); // after 5 secs
I DON'T want it to show when I highlight this text
<br />I DO want it to show when I highlight this text.
<div type='text' id='Note' style="display:none;">HIDDEN DIV CONTENT</div>
You're very close!
Here's what I have:
function ShowNote() {
if(window.getSelection() == "I DO want it to show when I highlight this text.")
document.getElementById('Note').style.display = 'block';
setTimeout(function(){
document.getElementById('Note').style.display = 'none';
}, 5000); // after 5 secs
}
document.onmouseup = ShowNote;
if (!document.all) document.captureEvents(Event.MOUSEUP);
I DON'T want it to show when I highlight this text<br />
I DO want it to show when I highlight this text.
<div type='text' id='Note' style="display:none;" >HIDDEN DIV CONTENT</div>
Changes:
You need to check what is highlighted via the "window.getSelection()"
function.
You were passing a string to setTimeout
hidden isn't a valid display option, none is
So you know, it's generally bad practice to just have text floating around outside of tags. So it's best to stick your first two lines in <p> tags or something.
You are using quite old and antiquated code. Here's the modern approach:
function showNote() {
document.getElementById('Note').classList.remove("hide");
setTimeout(hideNote, 5000); // after 5 secs
}
function hideNote(){
document.getElementById("Note").classList.add("hide");
}
document.getElementById("select").addEventListener("mouseup", showNote);
.hide { display: none; }
#select { color:red; }
<div>I DON'T want it to show when I highlight this text</div>
<div>I DO want it to show when I highlight <span id="select">this text</span>.</div>
<div type='text' id='Note' class="hide">HIDDEN DIV CONTENT</div>
This is what I did for you.
I setup interval. that occurs every time you mouse out.Or even better it will check if it's your div's style is block on the page.
Hope this helps
Live exapmle on Codepen
var target = document.getElementById('note');
var i = setInterval(function(){
if (document.getElementById("note").style.display == 'block') {
hide();
}
}, 5000);
function showNote() {
target.style.display = 'block';
}
function hide(){
document.getElementById("note").style.display = "none";
}
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/