javascript/html/css Show/hide box - javascript

I have done something like this before but this time code is not working. Basically, I want to let users toggle a box of html on and off. Here is a jsfiddle
http://jsfiddle.net/2pcwW/
There are several problems with this. First it isn't working as is possibly due to a typo. Second, I would like the default to be hide text, not show it, the opposite of what this tries to do. Finally, is it possible to place a table inside of the div so the whole table gets toggled on and off--in place of just "some text".
Here is non working code..same as in jsfiddle.
JS:
function toggleBox(obj) {
var box = document.getElementById("box");
if (box.style.display == "none") {
box.style.display = "";
obj.innerHTML = <div>Hide</div>;
} else {
box.style.display = "none";
obj.innerHTML = <div>Show</div>";
}
}
html:
<table><tr><td><div>
<div>Hide</div><div id="box">
Some text</div></div></td></tr></table>
Thanks for any suggestions.

Well, if you're okay not using JavaScript (and supporting only browsers that implement the :target pseudo-selector):
<table>
<tr>
<td>
<div>
<a href="#box">
<div>Hide</div>
</a>
<div id="box">
Some text. Hide</div>
</div>
</td>
</tr>
</table>
And CSS:
#box {
display: none;
}
#box:target {
display: block;
}​
JS Fiddle demo.

Related

Creating a script for a button to close other sections when opening its own sections

This is hard to explain precisely. But here we go:
I have a button that calls a function
<button onclick="myFunction_gsm()">Men</button>
When the button is pressed, it triggers a script. This script grabs a hidden section and displays it. The script goes like this:
<script>
//Gender Selection Script Men//
function myFunction_gsm() {
var x = document.getElementById("men-sizing");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
On the screen this plays out so that you click the button, a section appears, if I click the same button again the section hides again. However, I have another 2 sections. 3 Sections in total. For this example, the above script works for 1 section, the A section. There is also B and C. I would like to include the behavior that when A has been pressed, therefore displaying section A, if I then press the button for B the B section appears but the A section disappears without having to press the A button again. A Dynamic change of sorts.
I am a complete starter for coding but I assume it's something you add into the if statement. Any help would be greatly appreciated.
I would prefer solutions that incorporate the code I have now, since I won't have much use recreating it from scratch. It would solve this, but cause many new problems.
Define a class for all sections, for example sec. On click event pass the selected id, hide all of them and just toggle the selected one.
function myFunction_gsm(sectionId) {
let sec = document.querySelectorAll('.sec');
sec.forEach(itm => {
if(itm.id !== sectionId) itm.style.display = 'none'
})
var x = document.getElementById(sectionId);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
let sec = document.querySelectorAll('.sec');
sec.forEach(itm => {
itm.style.display = 'none'
})
<button onclick="myFunction_gsm('sec1')">Sec1</button>
<button onclick="myFunction_gsm('sec2')">Sec2</button>
<button onclick="myFunction_gsm('sec3')">Sec3</button>
<div class="sec" id="sec1"> some text 1 here</div>
<div class="sec" id="sec2"> some text 2 here</div>
<div class="sec" id="sec3"> some text 3 here</div>
You might use class names for the sections. Then at the start of the function have all elements with that class name be hidden and afterwards display the currently clicked one.
If you want to preserve the toggle functionality for the section (so clicking A twice displays and hides it again), you want to check the display state of the currently clicked one first before hiding all. And then only display the clicked one if it was hidden before.
The modern approach is to avoid using .style within JS. This add the stylign as inline-style which ahs the highest specificty weight with exeption of important. The modern solution is to use classList to apply, remove or toggle a CSS-Class.
You add a class to CSS to hide element such as: .display-none { display: none; }`
Then you add a function to your button to hide all sections with a certain class by adding the class mentioned at step 1: function hideAll() { document.querySelectorAll('.class-name').forEach(el => el.classList.add('display-none')); }
You add a second function to the onclick trigger of a button thow a certain element by removing the class: element.classList.remove('display-none');
function hideAll() {
document.querySelectorAll('.section').forEach(el => el.classList.add('display-none'));
}
function showA() {
document.querySelector('#section-a').classList.remove('display-none');
}
function showB() {
document.querySelector('#section-b').classList.remove('display-none');
}
function showC() {
document.querySelector('#section-c').classList.remove('display-none');
}
.display-none {
display: none;
}
<button onclick="hideAll(); showA()">Show A</button>
<button onclick="hideAll(); showB()">Show B</button>
<button onclick="hideAll(); showC()">Show C</button>
<section id="section-a" class="section display-none">Section A</section>
<section id="section-b" class="section display-none">Section B</section>
<section id="section-c" class="section display-none">Section C</section>
CSS-only Solution
If you dont want to sue scripts, you could use a pure CSS-Method that works through the :target selector. This allows you to use anchor as "trigger".
Hide the scetiond with display: none; either by selecting them directly or adding a class to them.
use an anchor with an href="#id" instead of a link. This will move the page to that element but also manipulate the websites adress.
Use *:target { display: block; } to show targeted elements:
.display-none {
display: none;
}
*:target {
display: block;
}
/* for styling purpose only */
a {
margin-right: 15px;
}
Show A
Show B
Show C
<section id="section-a" class="display-none">Section A</section>
<section id="section-b" class="display-none">Section B</section>
<section id="section-c" class="display-none">Section C</section>

Need help aligning dynamic td element in html form

I have the following piece of code:
<tr>
<td style="display:none;" id="missing_person_report_label"><b>Enter image</b></td>
<td style="display:none;" id="missing_person_report_image"><input type="file"><br/></td>
</tr>
These td elements are initially set as hidden and are only displayed when I'm selecting the "Missing Person Report" option from the dropdown menu. The Javascript function to activate these td elements is given as:
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_label").style.display = "block";
document.getElementById("missing_person_report_image").style.display = "block";
}
}
The code is doing as intended but there is a problem with the alignment of the tr element. This is the screenshot of the webpage.
I want the Choose file to have the same alignment as all the above elements,i.e. I want the Choose file to be on the right side of the Enter Image label . How do I do it?
Edit: Full Code is available here:
Edit: Those who are saying that I should assign the style to tr instead of td, I already tried doing this. If I do this, the webpage looks like this:
I want all the elements on the right to have the same alignment.
#Ronith.
Actially you their CSS as block, so that's why they are on separated lines. You should set display = "table-cell"
table {
width: 100%;
}
td {
display: table-cell;
}
<table>
<tr>
<td
id="missing_person_report_label"><b>Enter image</b></td>
<td
id="missing_person_report_image"><input type="file"></td>
</tr>
</table>
P.S.: do not pay attention that display is in CSS. It's just for instance. You should set it from JS code as you wish
display:block; makes a html element to take the full width of it's parent. So, you made tds to block level element they took all the width available and the upper one pushed the second one below.
Solution is not to change it's default display property. However try with inline-block or table-cell; which is the default property for tds inside a table.
The issue is because of display:block in javascript. set display: inline-block in your javascript code:
document.getElementById("missing_person_report_label").style.display = "inline-block";
document.getElementById("missing_person_report_image").style.display = "inline-block";
try this - apply display none to tr and not the td and from the function display block it again
<tr style="display:none;" id="missing_person_report_row">
<td><b>Enter image</b></td>
<td><input type="file"><br/></td>
</tr>
Function
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_row").style.display = "block";
}
}

Getting state of a variable to be printed out

I currently have a button that when I press it a table appears below it. My first question that I can't figure out is that I cannot get a border although I specified border="10". I am using firefox. Next I cannot figure out how to when I am done with my table to be able to press the button and have the table be hidden. My third question is that this table is being written as a test to see the state of my variables and parameters in my jsp are what I think they are. In my third cell of my table where I have just docs I want the the current value on the page of getDocs(). If I put it in the getDocs() then it gives me the result on page load which would be null. But in my showDiv() method when I run my debugger it shows the correct value of getDocs in the var docs = getDocs();. How do I get the docs value in docs.
window.onload = function()
{
document.getElementById("button").onclick = showDiv;
}
function showDiv()
{
document.getElementById("hidden").style.display = "block";
var docs = getDocs();
}
<input type="button" id="button" value="Click to show states" onclick="showDiv()"/>
<div id="hidden" style="display:none">
<table border="10" style="width:300px">
<tr>
<td>Type</td>
<td>Object</td>
<td>value</td>
</tr>
</br>
<tr>
<td>Element 1</td>
<td><%=docs%></td>
<td>docs</td>
</tr>
</table>
</div>
For the border issue, what happens if you put the border definition in the style declaration:
<table style="width:300px;border:1px solid black;">
For showing / hiding, a simple toggler can be put into the showDiv() call. Try:
function showDiv() {
if (document.getElementById('hidden').style.display == 'block') {
document.getElementById('hidden').style.display = 'none';
}
else {
document.getElementById('hidden').style.display = 'block';
}
}
Need more code examples and explanation to work on the Docs issue.
1) border is a css style attribute, so apply it in the css file.
#foo (yourid)
{
border: 10px;
}
2) you will have to create the button and create a onClick() function (JavaScript). This function will retrieve the table (possible by id) then change the display to none
var table = document.getElementById("foo);
table.style.display = none;
3) Not to sure about this one.
I'm not sure I will answer to each question here, but here you go anyway : http://jsfiddle.net/bbtVH/8/
You just need this javascript, since you use the HTML attribute onclick on your button, no need to add a listener in window.onload :
function showDiv() {
var table = document.getElementById("hidden");
if (table.style.display !== "block"){
table.style.display = "block";
// Just get docs from JSP, if you want to get its value :
// var docs = <%=docs%>;
}
else {
table.style.display = "none";
}
}
This CSS will give you borders of 2px around your cells :
td{
border: 2px solid black;
}
for your border :
<table border="10" style="width:300px border: 5px solid red; display:none">
to hide the table :
$("#hidden").fadeOut("slow");
or to see it :
$("#hidden").fadeIn("slow");
the get the values from docs:
docs.val()

Hiding div clicking on other [duplicate]

This question already has answers here:
How to display one div and hide all others
(7 answers)
Closed 10 years ago.
I have four button and four div above it.
I want to only one div at time , but keep showed the four button.
Here it is the html for buttons
HTML
<div id="container">
<a><p id="firstBtn" class="mediabutton"><span class="icon"></span>button1</p></a> <!-- 1st button -->
<div id="firstDiv" class="mediaoptions" >
... <!-- stuff of the div -->
</div>
<a><p id="sndBtn" class="mediabutton active"><span class="icon"></span>button2</p></a> <!-- 2st button -->
<div id="sndDiv" class="mediaoptions" >
... <!-- stuff of the div -->
</div>
This is how I can recogniz which button was clicked
Javascript
$("container").click(function(event){
var that = event.target.id;
if(((that == "firstBtn") || (that == "sndBtn") || (that == "trdBtn") || (that == "fourBtn") )
&& !($("#"+that).hasClass("active"))
)
{
//Here comes the stuff
}
});
Now. The active class let the button to be Highlighted. I want only one button highlight.
The sndDiv is set on display : block , the others are set on display: none.
Making a recap : I want to press a button , show the div above it and hide everybody else. I tried really a lot of stuff, but i failed.
Sorry for my english, Cheers.
Just replace Btn with Div, and you have the element you'd like to show, the others have a common class and are easy to target :
$("#container").on('click', '.mediabutton', function(event){
var that = event.target.id,
elem = $('#' + that.replace('Btn','Div'));
if( !$("#"+that).hasClass("active") ) {
$('.mediaoptions').not(elem).hide();
elem.show()
}
});
The following should work.
$("container").click(function(event){
var that = event.target.id;
if(((that == "firstBtn") || (that == "sndBtn") || (that == "trdBtn") || (that == "fourBtn") ) && !($("#"+that).hasClass("active")))
{
$('.mediaoptions').show();
$('#'+that.replace('Btn','Div')).show();
}
});
I hate to just point you to a link, but I created a really lightweight jQuery script to handle stuff like this that you might found useful: http://cferdinandi.github.com/tabby/.
You may find it easier to just repurpose that than try to modify your existing code to work.
Don't jQuery .hide() and .show() do the job?
http://api.jquery.com/hide/
Add the second line below to your javascript and see what is alerted:
var that = event.target.id;
alert(that);
I'm not sure exactly what you're trying to accomplish perhaps something like:
<p id="sndBtn" class="mediabutton active"><span class="icon"></span>button2</p>
See this example: JsFiddle. I made some updates on javascript and html;
$(".mediabutton").click(function(event){
$(".mediabutton").removeClass("active");
$(this).addClass("active");
$(".mediaoptions").hide();
$("#"+$(this).data("target-div")).show();
});
Here is the working jsFiddle: http://jsfiddle.net/CtqUU/
With this you can have as many <div> and <button> elements as you want. Change class names and id as needed to fit what you need.
HTML:
<div class="hidden" id="box1">Box 1</div>
<button value="box1">Box 1</button>
<div class="hidden" id="box2">Box 2</div>
<button value="box2">Box 2</button>
CSS:
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
}
.hidden {
display: none;
visibility: hidden;
}
JS:
$("button").click(function(){
var val = $(this).val();
$("div").addClass("hidden");
$("#"+val).removeClass("hidden");
});

Displaying table as pop up/ on the top of HTML

I have a link in my datalist
details
<table style="display: none; background-color:AntiqueWhite; border-color:Black;
direction:rtl;" class="MyTable">
<tr>
<td>
<asp:Label ID="lblShowHide" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem,"Description")%>'></asp:Label>
</td>
</tr>
</table>
On click of the link I am displaying the assciated table related to the link by the below function:
<script type="text/javascript" language="javascript">
function showHideDesc(link)
{
var table = link.parentNode.getElementsByTagName("TABLE")[0];
if (table.style.display == "none")
{
table.style.display = "";
link.innerHTML = "details";
}
else
{
table.style.display = "none";
link.innerHTML = "details";
}
}
</script>
Till now it is working fine, but the issue arises that the description which I am showing is of 10-15 lines and the table is hiding because of the other records in the datalist. I need to show this on the top of every HTML.. some Pop up kind of stuff.
Please help
To display your table above other HTML content, you should use the z-index CSS attribute. This enables some kind of layering of your content.
Take a look at http://w3schools.com/css/css_positioning.asp for some more info

Categories

Resources