It works... but i want to change the default to hidden.
Click first time to show the hidden text
<script>
function displayRow(itemID){
if ((document.getElementById(itemID).style.display == 'block')) {
document.getElementById(itemID).style.display = 'display';
} else {
document.getElementById(itemID).style.display = 'display';
}
}
</script>
<button onclick="displayRow('1')">Show/Hidden text</button>
Simply set your display to hidden by default
<button style='display: hidden;' onclick="displayRow('<? echo $element ?>')" class='no-print'>Show/Hidden text</button>
and the js
function displayRow(itemID){
var el = document.getElementById(itemID);
if ((el.style.display == 'hidden')) {
el.style.display = 'block';
} else {
el.style.display = 'hidden';
}
}
function displayRow(itemID){
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = 'block';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
<table>
<tr style="display:none" id="1">
<td>Test</td>
</tr>
</table>
<button onclick="displayRow('1')">Show/Hidden text</button>
Use "none" instead "hidden", and put style="display: none" to the element which want to hide by default
function displayRow(itemID){
if (document.getElementById(itemID).style.display == 'block') {
document.getElementById(itemID).style.display = 'none';
} else {
document.getElementById(itemID).style.display = 'block';
}
}
Related
Searched around and couldn't find what I was looking for. I have 2 buttons that pull up a two different select boxes on a click and they will disappear with a second click. However, I want select box 1 to disappear on Button click 2 and vice versa: select box 2 will disappear on Button click 1.
HTML:
window.onload = function()
{
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
function button2function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
<button type="button" value='hide/show' onclick="button1function('name1')">Button 1</button>
<button type="button" value='hide/show' onclick="button2function('name2')">Button 2</button>
<select id="name1">
<option value="">What would you like to know..</option>
</select>
<select id="name2">
<option value="">What would you like to know 2..</option>
</select>
Like this? https://jsfiddle.net/o3btLkpd/
try calling this at the top of the event handler for button 1:
document.getElementById('name2').style.display = 'none';
and this in the handler for button 2:
document.getElementById('name1').style.display = 'none';
the full resulting code would be like this:
window.onload = function() {
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id) {
document.getElementById('name2').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
function button2function(id) {
document.getElementById('name1').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
I have a drop down list and I want every time someone clicks on one of the list, it shows a hidden div, I've written this code but for some reason it doesn't work:
<?php
echo '<select name="ipqos" onchange="myFunction()">';
if ($enable_iprule[0]=='yes'){
echo '<option value="enable_iprule" selected>Enable IP Rule';
}
else{
echo '<option value="enable_iprule">Enable IP Rule';
}
if ($enable_qoshunter[8]=='yes'){
echo '<option value="enable_qoshunter" selected>Enable QoS Hunter';
}
else{
echo '<option value="enable_qoshunter">Enable QoS Hunter';
}
if ($enable_iprule[8]=='no' && $enable_qoshunter[0]=='no'){
echo '<option value="disable_all" selected>Disable All';
}
else{
echo '<option value="disable_all">Disable All';
}
echo '</select>';
echo "
<div id=\"ip\" style=\"display:none\">
<br><br>IP Rule :
<br><textarea name=\"ip_rule\" rows=\"2\"/>$ip_list[1]</textarea>
</div>
<div id=\"qos\" style=\"display:none\">
<br><br>QoS Target :
<br><textarea name=\"qos_target\" rows=\"2\"/>$qos_list[1]</textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>";
?>
I don't get any error messages on my script but for some reason every time I click on a menu, the corresponding hidden div doesn't show up
Where did I go wrong?
UPDATE: This is the View Source from Google Chrome
<select name="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>
This line:
var menu = document.getElementById('ipqos');
There is no element with ID ipqos. There is an element with that name, but not an ID. Change it to:
<select name="ipqos" id="ipqos" onchange="myFunction()">
Second, you're comparing the text of the selected option. Looking at your options, you want to be checking the value instead:
menu.options[menu.selectedIndex].value == 'enable_iprule'
Working example:
function myFunction() {
var menu = document.getElementById('ipqos');
var val = menu.options[menu.selectedIndex].value;
if (val == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (val == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
<select name="ipqos" id="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>
RGraham solutions works perfectly.
I did a small work arround on your script.
Here is a simple jsFiddle : http://jsfiddle.net/5ypkaxup/
For the Javascript, I did simplify the process a little bit.
function changedSelect() {
var selectedOption = document.getElementById("ip_select").value;
document.getElementById("demo").innerHTML = "You selected: " + selectedOption;
if(selectedOption == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (selectedOption == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
As he told, you need to give an ID to your select element to make it works.
<select id="ip_select" name="ipqos" onchange="changedSelect();">
Only started JS a couple of days ago, and I'm already having some troubles getting a toggle to work. I want the button to toggle between on and off when clicked.
function click() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on"); {
change.innerHTML = "off";
} else {
change.innerHTML = "on";
}
}
<button type="button" id="toggle" onClick="click()">on</button>
Is this how I should go about it?
try this
<!DOCTYPE html>
<html>
<body>
<button id="toggle" onclick="myFunction()">on</button>
<script>
function myFunction() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on")
{
change.innerHTML = "off";
}
else {
change.innerHTML = "on";
}
}
</script>
</body>
</html>
define your function to be unique as always
and not make use of the javascript function/reserve words
just a recommendation/suggestion
Your having mistake in the if statement,there is no semicolon after if statement
write the code as like below
<button name="toggle" id="toggle" onclick="myFunction()">on</button>
<script>
function myFunction() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on")
{
change.innerHTML = "off";
}
else {
change.innerHTML = "on";
}
}
</script>
You can do this:
<button type = "button" id= "toggle" onClick = "click()">on</button>
function click()
{
var change = document.getElementById("toggle");
if (change.value == "on")
{
change.value = "off";
}
else
{
change.value = "on";
}
}
or by doing this:
function click()
{
if (this.value=="on")
{
this.value = "off";
}
else
{
this.value = "on";
}
}
It will work for you
function myFunction()
{
var change = document.getElementById("toggle");
if (change.value=="off") change.value = "on";
else change.value = "off";
}
for button
<input type="button" value="on" id="toggle" onclick="myFunction()">
From previous threads I've used the following code.
Current code is available for review at http://jsfiddle.net/sLHKq/
<div id="question1">
<ol>
<li id="correct1">A1</li>
<li id="">A2</li>
</ol>
<div id="answer1" style="display:none;"></div>
<button onclick="toggle('answer1');">Button 1</button>
</div>
<hr>
<div id="question2">
<ol>
<li id="">B1</li>
<li id="correct2">B2</li>
</ol>
<div id="answer2" style="display:none;"></div>
</div>
<button onclick="toggle('answer2');">Button 2</button>
The Javascript I used is as follows for OnClick correct1 and correct2 id's in both divs are changing background color.I tried this code to achieve it for Only the respective Button's toggle to work.
function toggle(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById("correct1").style.backgroundColor = '#BCF5A9';
document.getElementById("correct2").style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById("correct1").style.backgroundColor = '#FFFFFF';
document.getElementById("correct2").style.backgroundColor = '#FFFFFF';
}
}
How can restrict the onclick and background color change to just the question's button div ?
do you mean like:
function toggle(id) {
var e = document.getElementById("answer" + id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';
document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';
document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';
}
}
See updated Fiddle
I would suggest to pass correct answer id also in the function like this:
function toggle(id, ans) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById(ans).style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById(ans).style.backgroundColor = '#FFFFFF';
}
}
check fiddle: http://jsfiddle.net/sLHKq/2/
i want to replace a div by other div on button click. I have seen examples of show/hide div. But using this the second div is shown below first i.e it shows on the next line. I want to not only hide the div but replace or show the div on the same position. My code is :
<script language="javascript" type="text/javascript">
function toggleDiv(Flag)
{
if (Flag == 'one')
{
document.getElementById("one").style.visibility = "visible";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("four").style.visibility = "hidden";
}
else if (Flag == 'two')
{
document.getElementById("two").style.visibility = "visible";
document.getElementById("one").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("four").style.visibility = "hidden";
}
else if (Flag == 'three')
{
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "visible";
document.getElementById("four").style.visibility = "hidden";
}
else if (Flag =='four')
{
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("four").style.visibility = "visible";
}
else {
document.getElementById("one").style.visibility = "visible";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("four").style.visibility = "hidden";
}
}
</script>
<center>
<div id="one" style= " visibility:visible">
//some code
</div>
<div id="two" style= " visibility:hidden">
//some code
</div>
<div id="three" style= " visibility:hidden">
//some code
</div>
<div id="four" style= " visibility:hidden">
//some code
</div>
</center>
This code works perfectly but as i said it shows each div on next line i want it to b on same line. Any Help??
Use css and add property in the div class I.e position : absolute;