Im using the following JS
Add a Street Address
and the following html
<div id=entry>
<div id=label>Street</div>
<div id=input><input name="" type="text" class="longtext" /></div></div>
<div id=entry>
<div id=label>City/Town</div>
<div id=input><input name="" type="text" class="longtext" /></div></div>
How would i modify the JS to show/hide both of those divs at once, and then make the link disappear?
a. you better off using class instead of id where both share the same value (e.g. entry)
<div class=entry>
<div id=label>Street</div>
<div id=input><input name="" type="text" class="longtext" /></div></div>
<div class=entry>
<div id=label>City/Town</div>
<div id=input><input name="" type="text" class="longtext" /></div></div>
b. Hiding both divs can be done as:
$('.entry').hide();
hiding the clicked link
$(this).hide();
return true;
e.g.
<a id='myLinkId' href='#'>Click To Hide</a>
$('a#myLinkId').click(function(){
$('.entry').hide();
$(this).hide();
return true;
});
First give an id to your link tag like 'link', then give you two dives two different ids, then write a js function like this :
show_hide = function()
{
if(document.getElementById('link').style.display == 'none'){
document.getElementById('link').style.display = 'inline';
document.getElementById('entry1').style.display = 'inline';
document.getElementById('entry2').style.display = 'inline';
}else{
document.getElementById('link').style.display = 'none';
document.getElementById('entry1').style.display = 'none';
document.getElementById('entry2').style.display = 'none';
}
}
IDs need to be unique so I have changed the ids to classes. Also, I have changed the code from being inline to being unobtrusive The jQuery would be something like the following
$(function() {
$('#addressLink').click(function() {
$('div.entry').toggle();
$(this).hide();
return false; // prevent the default anchor behaviour
});
});
<a id="addressLink" href="#">Add a Street Address</a>
<div class="entry">
<div class="label">Street</div>
<div class="input"><input name="" type="text" class="longtext" /></div>
</div>
<div class="entry">
<div class="label">City/Town</div>
<div class="input"><input name="" type="text" class="longtext" /></div>
</div>
Assuming that you want the <div> elements to be hidden initially, simply add $('div.entry').hide(); into the document ready handler. There are other techniques that you can use here, but I would suggest hiding using JavaScript for graceful degradation purposes
Here's a Working Demo. Add /edit to the URL to see the code
Related
I have the following problem, I would like to create a few spoilers. This has worked so far, but I would like that if a spoiler is open and one clicks on another, the opened again closes.
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>
<div id="spoiler" style="display:none">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Show/hide</button>
<div id="spoiler2" style="display:none">
Content2
</div>
Assign a common class to all spoilers and on click hide the contents of all the spoilers using the class name and simply show only the one you want to show:
I have created a function for this like so:
<script>
function showSpoiler(spoilerId)
{
var spoilers = document.getElementsByClassName('spoilers');
for(var i=0;i<spoilers.length; i++)
{
spoilers[i].style.display = "none";
}
document.getElementById(spoilerId).style.display = "block";
}
</script>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler');">Show/hide</button>
<div id="spoiler" class="spoilers" style="display:none">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler2');">Show/hide</button>
<div id="spoiler2" class="spoilers" style="display:none">
Content2
</div>
spoilers is the common class which needs to be hidden before showing the specific one.
Remember
getElementsByClassName() gives out an array that is why the for loop is in place.
To make it easier for you to start, I'll give you an example made for Event Listener for Radio buttons.
code:
document.getElementById("type_test").addEventListener("click", functio_test);
document.getElementById("type_test1").addEventListener("click", functio_test);
function functio_test(){
var x = document.querySelector('input[name="type_test"]:checked').value;
//var x = document.forms[0].elements.type_test.value;
if(x == "ola"){
alert("Ola José");
document.getElementById('disp_0').style.display = 'block';
document.getElementById('disp_1').style.display = 'none';
}
else if(x == "adeus"){
alert("Adeus José");
document.getElementById('disp_1').style.display = 'block';
document.getElementById('disp_0').style.display = 'none';
}
else {
alert("Continua José");
}
}
<div id="select_0">
<br> <input id = "type_test" type="radio" name="type_test" value="ola"> ola
<input id = "type_test1" type="radio" name="type_test" value="adeus"> adeus <br/> <br><br/>
</div>
<div id="disp_0" style="display:none">
<input type="text" name="lastname" value="ola Jose" ><br><br/>
</div>
<div id="disp_1" style="display:none">
<input type="text" name="lastname1" value="Adeus Jose" ><br><br/>
</div>
I hope the post helps you.
you can use classes to accomplish this (class="spoilers")
<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler')"> Show/hide </button>
<div id="spoiler" style="display:none" class="spoilers">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler2')"> Show/hide </button>
<div id="spoiler2" style="display:none" class="spoilers">
Content2
</div>
<script>
function toggleSpoiler(id) {
var spoilers = document.getElementsByClassName("spoilers");
for(var i = 0; i < spoilers.length; i++) {
if (spoilers[i].id != id) {
spoilers[i].style.display = "none";
}
}
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display='';
} else {
document.getElementById(id).style.display='none';
}
}
</script>
The way I would do this would be to create two additional classes and add an additional div to use the parent/child association to determine which spoiler (in relation to the button) needs to be displayed.
Starting off with the classes, let's call them
.spoiler
and
.active
The idea is to make the .spoiler class hide and the .active class show, like so:
.spoiler {
display:none;
}
.spoiler.active {
display:block;
}
All spoiler elements would have .spoiler as a class and only the currently active spoiler would have the .active class, now let's create our new div which will bundle the spoilers and their buttons to have a common parent.
<div class="spoiler-item">
<button title="Click to show/hide content">
Show/Hide
</button>
<div class="spoiler">
Content
</div>
</div>
<div class="spoiler-item">
<button title="Click to show/hide content">
Show/Hide
</button>
<div class="spoiler">
Content2
</div>
</div>
Now we can use the relative "spoiler-item" class when a button is pressed to determine which spoiler is related to the button being pressed and also remove the "active" class from all other "spoiler" elements to make sure only one spoiler is shown at a time.
I recommend using jQuery for this, due to time constraints I'm not going to be able to do it in pure JS.
$(document).ready(function() {
$('.spoiler-item button').click(function(e) {
if($(this).parent('.spoiler-item').find('.spoiler').hasClass('active')) { // If the item we've selected is already active
$(this).parent('.spoiler-item').find('.spoiler').removeClass('active');
return;
}
$('.spoiler.active').removeClass('active'); // Close all open spoilers
$(this).parent('.spoiler-item').find('.spoiler').addClass('active'); // Open relative spoiler
});
});
See JSFiddle for working answer: https://jsfiddle.net/vvm4xe0m
I have this input:
<div class="form-group col-md-12">
<input type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="one" name="one" alt="button"/>
<div id="div_one" class="collapse">3rd Molar: <?php echo $resTeeth['one'] ?></div>
<!--31 one more similar input images-->
</div>
And this is the final output of those images:
Now each of those images, are buttons, and I need to slideToggle() a <div id="div_one"></div> and div_two and until div_thirty_one.
I made this script using jQuery and tested it on one button only but it didn't worked, and no errors at the console:
$(document).ready(function()
{
$("#one").click(function()
{
$("#div_one").slideToggle();
});
});
No slides when clicking on this image button.
Changes made
► Added a common class for <img>. With respect to that clicked img we can find the corresponding text and toggle it.
Working Demo
$(document).ready(function()
{
$(".img").click(function()
{
$(this).next().slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-12">
<input class="img" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="one" name="one" alt="button"/>
<div id="div_one" class="collapse">3rd Molar: <?php echo $resTeeth['one'] ?></div>
<!--31 one more similar input images-->
</div>
I am making a small web application that allows users to add sticky notes to a page by clicking the add button. The following is the html that makes up a sticky note.
<div class="sticky_note">
<div class="title">
<input type="text" name="title" placeholder="My Title"><span class="close">x</span>
</div>
<div class="content">
<textarea name="note" placeholder="Type here..."></textarea>
</div>
</div>
I am just a bit unsure how to add another sticky note everytime the user clicks add. Any help would be appreciated. Thanks!
You could generate an html element by pressing a button, for example:
var div = document.createElement('div');
div.id = 'window'; //you can assign property to your element.
var div2 = document.createElement('div');
div2.id = 'windowhead';
div.appendChild(div2);
document.body.appendChild(div);
this code append a div into another main container. I hope that this can be help.
var stickyNote = $('.sticky_note')[0].outerHTML;
$('#addBtn').click(function(){
$stickyNote = $(stickyNote);
$stickyNote.appendTo($('.sticky_notes_container'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky_notes_container">
<div class="sticky_note">
<div class="title">
<input type="text" name="title" placeholder="My Title"><span class="close">x</span>
</div>
<div class="content">
<textarea name="note" placeholder="Type here..."></textarea>
</div>
</div>
</div>
<button id=addBtn>Add</button>
Assuming all this is inside a main container ,just keep that var code=<div class="sticky_note">...</div> code in a string and use
$("container").append(code);
You can easily create a new div.By using
document.createElement("div")
You can add text, classes..just look up w3school for more details..
Also i see your requirement, that clicking on button it will create a sticky note..
Element.cloneNode()
Might be helpful for you..where you make a div once with all the design and structure and use it again again..
http://www.w3schools.com/jsref/met_node_clonenode.asp
how to hide fields in html if fields are empty and the image src also. using java script. please suggest
<div id="pagewrapper" >
<div class="row" >
<div class="column-half" style="width:500px">
<div class="containerdiv" >
<form:label path="file4Desc" type="text" value="" maxlength="50">
</form:label>
<form:input path="file4Desc" value="${agreement.file4Desc}"
style="width:300px"/>
<font color="red"><form:errors path="file4Desc" /></font>
</div>
</div>
<div class="column-half" style="width:13%">
<div class="containerdiv">
<form:label path="filename3" type="text" value="" maxlength="50">
</form:label>
<a href="${pageContext.request.contextPath}/customer/viewDownload3/${agreement.agreementId}.htm">
<img src="${pageContext.request.contextPath}/resources/images/download3.gif"
border="0"
title="Download this document"/>
</a>
</div>
</div>
</div>
</div>
Try this : You can make use of .filter() and hide input if value is empty.
$(function(){
$('.containerdiv input').filter(function(){
return $(this).val().trim()=='';
}).hide();
});
API Document for filter()
EDIT - As OP want to hide both input and image if input value is empty, please see below updated solution
$(function(){
$('.containerdiv input').each(function(){
if($(this).val().trim()=='')
{
//hide parent div and next div having image
var $parentDiv = $(this).closest('.column-half');
$parentDiv.next('.column-half').hide();
$parentDiv.hide();
}
});
});
Try this:
$(function(){
$('.containerdiv input').each(function(){
if($(this).val().trim()=='')
$(this).hide();
})
});
In rendering out data within HTML, which prints out a div down the page, for every row found in the database, I'm trying to find a way to allow each button that sits in each div to toggle the individual example when clicked (with a default of display:none upon loading the page) - something such as:
function toggle_div(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
An example of the final markup :
<div>
<div class="wordtitle">Word</div>
<div class="numbers">1</div>
<div class="definition">Definition</div>
<button class="button" id="show_example" onClick="toggle_div('example')">Show example</button>
<div class="example" id="example">Example 1</div>
</div>
<div>
<div class="wordtitle">Word</div>
<div class="numbers">2</div>
<div class="definition">Definition</div>
<button class="button" id="show_example" onClick="toggle_div('example')">Show example</button>
<div class="example" id="example">Example 2</div>
</div>
getElementById() only toggles the first div's example, and getElementsByClass() hasn't seemed to work so far - not too sure how to do this - any ideas much appreciated!
First rule, do not insert multiple elements with the same ID. IDs are meant to be unique.
What you need is to toggle the example near the button you clicked, and not any (or all) .example to be showed / hidden. To achieve this, considering you used the [jquery] tag in your question, you can either use a selector to get the nearest .example of your button, or use jQuery's built-in functions to get it (.siblings()).
I would personally put the onclick out of your markup, and bind this custom function in your javascript.
Another important thing : if javascript is disabled client-side, the user won't ever see your example, as they are hidden by default in CSS. One fix would be to hide it initially with JS (see the snippet for this).
Here's a demonstration of what I mean :
$('.example-trigger').click(function() {
//Use the current button which triggered the event
$(this)
//Find the sibling you want to toggle, of a specified class
.siblings('.example-label')
//Toggle (hide or show) accordingly to the previous display status of the element
.toggle();
});
//Encouraged : hide examples only if Javascript is enabled
//$('.example-label').hide();
.example-label {
display: none;
/* Discouraged : if javascript is disabled, user won't see a thing */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<button class="example-trigger">Toggle example 1</button>
<span class="example-label">Example 1</span>
</div>
<div>
<button class="example-trigger">Toggle example 2</button>
<span class="example-label">Example 2</span>
</div>
<div>
<button class="example-trigger">Toggle example 3</button>
<span class="example-label">Example 3</span>
</div>
As #Sean stated, you need the ID to be unique since that's the way you are getting your elements.
$words .= '<div class="wordtitle">' . $word .'</div>
<div class="numbers">' . $i . '</div>
<div class="definition">' . $definition . '</div>
<button class="button" id="show_example" onClick="toggle_div(\'example\''.$i.')">
show example</button>
<div class="example" id="example'.$i.'">' . $example . '</div>
<br/><br/>';
$i++;
#show_example will also be repeating so you will probably want to change that to a class.
Another answer, only because I had the answer ready and was called away before I could post it. So here it is.
Notice that for repeating elements, classes are used instead of IDs. They work just as well, and (as everyone else has already said), IDs must be unique.
jsFiddle demo
HTML:
<div class="def">
<div class="wordtitle">Aardvark</div>
<div class="numbers">1</div>
<div class="definition">Anteater</div>
<button class="button show_example">show example</button>
<div class="example" id="example">The aardvark pushed its lenghty snout into the anthill and used its long, sticky tongue to extract a few ants.</div>
</div>
<div class="def">
<div class="wordtitle">Anecdote</div>
<div class="numbers">2</div>
<div class="definition">Amusing Story</div>
<button class="button show_example">show example</button>
<div class="example" id="example">The man told an anecdote that left everyone laughing.</div>
</div>
jQuery:
var $this;
$('.show_example').click(function() {
$this = $(this);
if ( $this.hasClass('revealed') ){
$('.example').slideUp();
$('.show_example').removeClass('revealed');
}else{
$('.example').slideUp();
$('.show_example').removeClass('revealed');
$this.parent().find('.example').slideDown();
$this.addClass('revealed');
}
});