Element not hidden when button is clicked - javascript

Why display = "none" not works when button is clicked in jsFiddle?
HTML:
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
JavaScript:
$('input[type=button]').click( function() {
document.getElementsByClassName("hidden").style.display = "none";
});

document.getElementsByClassName() returns HTMLCollection which is an Array like object. You are trying to apply HTML Node properties on this array.
First select DOM Node from this array then apply style properties as shown below.
document.getElementsByClassName("hidden")[0].style.display = "none";
$('input[type=button]').click( function() {
document.getElementsByClassName("hidden")[0].style.display = "none";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" value="test" />
Alternatively you can use jQuery to hide element.
$('input[type=button]').click(function() {
$(".hidden").first().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" value="test" />
In Pure JavaScript you can do it as follows:
var button = document.getElementsByClassName('button')[0];
button.addEventListener('click', function() {
document.getElementsByClassName("hidden")[0].style.display = "none";
}, false);
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input class="button" type="button" value="test" />

You could use jQuery to do it easily, you already had included it to your project, so it is no overhead. Simply use hide() to remove the element from view:
$('input[type=button]').click(function() {
$(".hidden").hide();
});
Working example.

The document.getElementsByClassName returns an array of classes.
chose the first element of the array.
$('input[type=button]').click( function() {
document.getElementsByClassName("hidden")[0].style.display = "none";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" id="test" value="test" />
Here is the updated jsFiddle

No need to mix jQuery and JavaScript, here is a JS method:
document.querySelector('input').onclick = function() {
document.querySelector('.hidden').style.display = "none";
}
The reason your getElementsByClassName wont work is because it's an array. You either need to loop through it and display:hide; all of them, or get a specific one by appending [n] after it (n being the number of the element you want in the array, starting at 0).
document.querySelector('input').onclick = function() {
document.querySelector('.hidden').style.display = "none";
}
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" value="test" />

Why using Native JS when you have jQuery used on page.
http://jsfiddle.net/ritesh14887/pUeue/3442/
$('input[type=button]').click( function() {
$(".hidden").css('display','none');
});

Related

How to hide parent div if first child is empty

I want to hide class "aa" if the first div element is empty in class "ca". Please guide me
My sample code:
<div class="aa">
<div class="ca">
<div></div>
<div class="cb"></div>
<div class="cc"></div>
</div>
<div>
Appreciate your response!
You can use children(":first") to get first child of div as
$(document).ready(function(){
if($('.ca').children(":first").text() == ""){
$('.aa').hide();
}
});
$(document).ready(function(){
if($('.ca').children(":first").text() == ""){
$('.aa').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aa">
<div class="ca">
<div></div>
<div class="cb">A</div>
<div class="cc">B</div>
</div>
<div>
You can check to see if the first childNode of the .ca parent element has content, and then target .aa from there if it does not:
//If there is no content within the first div of the class="ca" div...
//choose between textContent and innerHTML below
//based on whether it is going to have any text or some HTML within (with possibly no text)
if (!document.querySelector('.ca').childNodes[0].innerHTML) {
//hide the class="aa" div
document.querySelector('.aa').style.display = 'none';
}

javascript toggle showing and hiding several div elements

I have two divs on a page (id's MAY and JUNE) and two buttons on the page. The page startes off by showing the May div, with the June div hidden using css display: none
I am trying to create the correct javascript that will toggle between the two of them, but (after searching on here) I can only manage to get one to work.
Codepen showing issue is https://codepen.io/billteale/pen/zwBBez
<a href="#" id="button" >MAY</a>
<a href="#" id="button" >JUNE</a>
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
...and the current js is
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('MAY');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Eventually I will have four or more divs to toggle between, with each button showing its relevant div, and hiding the others.
Can anybody tell me how to add to the code I have here to make this work for multiple elements?
It can be done by setting the div id's in the anchor tag's href attribute, and showing the corresponding div while hiding the rest. It can be done for any number of div's with no extra script, Just add the new div id to the new anchor tags href. You should give a common class to all the div's like month to select them all.
$("a.btn").click(function() {
var id = $(this).attr("href");
$("div.month:visible").hide();
$(id).show();
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY" class="month">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="month hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>
First you add a "div-toggle" class to each one of the divs you want to toggle. After that, you bind click events on your buttons, firing a function which takes an identifier as argument.
The function will run through your divs and set the one that has the argument id as visible, and hide the others.
This way you can add more divs to be toggled. You just have to mark them with the "div-toggle" class, set their id's and create their respective buttons.
var divs = document.getElementsByClassName('div-toggle');
function toggle(id) {
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.id == id)
div.style.display = 'block';
else
div.style.display = 'none';
}
}
<a href="#" onclick="toggle('MAY')" >MAY</a>
<a href="#" onclick="toggle('JUNE')" >JUNE</a>
<!-- first div, shows on page load -->
<div class="div-toggle" style="display:block;" id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="div-toggle" style="display:none;" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>
div.style.visibility = "hidden"
this will completely hide your div. I'm pretty sure this is what you are asking for
also instead of that you can make a separate function and add o'clock to div
<div onclick="nameoffunction()"></div>
the function can take in a parameter and each div on click function can have the parameter of its id
Your div were messed up! The snippet is working now with the help of jQuery.
$("#JUNE").hide();
$("#MAY").show();
$('#button-may').on("click", function() {
$("#JUNE").hide();
$("#MAY").show();
});
$('#button-june').on("click", function() {
$("#JUNE").show();
$("#MAY").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

Toggle display shows the hidden element for a second

I'm trying to show a hidden text on click of a button. But when I load the page, the text shows for a second and then disappears. Why would that happen?
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
$(document).ready(function() {
$(".temp").hide();
$("#showme").on("click", function() {
$(".temp").show();
});
});
Try to understand how the webpage loads. Your jquery is executed when the entire page is rendered with the associated CSS. So the browser displays your text for a second till it executes jquery to hide that text. So your browser needs to know that this text is hidden while parsing the html. You can do this by giving a CSS style to the text.
CSS:
.temp {
display: none;
}
HTML:
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
JS:
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});
You should use inline style tag in <p> tag like this:
<p class="temp" style="display: none;">This is temporary</p>
instead of hiding it from jQuery!
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="temp" style="display: none;">This is temporary</p>
<button id="showme">Show</button>
</div>

Disable(unclickable) background content in jQuery

i have a two div one is absolute position.
here is a code.
<input type="button" onclick="showdiv()" value="show" >
<div id="div2" style="display:none">
some content
name
<input type="button" value="click">
</div>
<div id="div1">
some content
name
<input type="button" value="click">
</div>
Here is jquery code .
function showdiv(){
$('#div1').fadeTo("slow",0.15);
$('#div2').show();
}
When I click on show button it fadeTo the div1 and show the div2. but problem is that div1 link and button also clickable and the link and button of div2 is not click able.
How can i disable background link.
$('#div1').unbind('click').click(function(e){
e.preventDefault();
});
Can be done if there are any onclick-listeners on the #div1directly.
In newer jquery versions you could do
$('#div1').off('click').click(function(e){
e.preventDefault();
});
But then again I would not recommend such a solution at all but would rather solve this by using a transparent div that lies above the #div1.
Example:
<div id="div1holder" style="position:relative">
<div id="div1">
</div>
<div id="div1blocker" style="display:none; position:absolute;top:0; left:0; background:transparent;">
</div>
</div>
Make #div1blockerbehave like #div1considering size and call $('#div1blocker').show() when you need to block it.
function showdiv() {
var div1 = $('#div1');
$('#div1blocker').show().width(div1.width()).height(div1.height());
$('#div2').show();
}
Of course, you can still use fading then:
function showdiv() {
var div1 = $('#div1');
$('#div1blocker').show().width(div1.width()).height(div1.height());
$('#div2').show();
div1.fadeTo("slow",0.15);
}
$('#div1 a').bind("click", function (e) {
e.preventDefault();
});
$('#div1 input').prop('disabled', false);
Apply css to show it as disabled.
fadeTo doesn't cause unbinding events. i have given you general solution.
The .fadeTo just changes the opacity of the element and children. There are other measures that need to be taken in order "disable" them.
HTML:
<input type="button" id="showdiv" value="show">
<div id="div1">some content name
<input type="button" value="click">
</div>
<div id="div2" style="display:none">some content name
<input type="button" value="click">
</div>
JS:
This will keep the <div> and content visible, but "disabled".
$("#showdiv").on("click", function () {
$('#div1').fadeTo("slow", 0.15, function () {
$('#div1').children().prop('disabled',true);
$('#div1 a').bind('click', false);
});
$('#div2').show();
});
JSFiddle

On click not working after appending checkbox elements in jquery

The contact_container div holds contact children, within these children is a checkbox. I use ajax to append these children to the container. Once I append the html and click a childs checkbox. The .click does not recognize the newly added checkboxes, Only the children work on page load. Below are working samples of my HTML and Jquery.
Can you offer a solution so that the appended checkboxes are picked up when they are clicked? Thanks
Here is my HTML markup:
<div id="contact_container">
<div class="contact">
<div class="contact_checkbox">
<div class="checkbox_container">
<div class="checkbox">
<input class="testing_checkbox" type="checkbox" name="contacts[]" value="bf6b0049059ec8998601f8fe20acb68ecafe2d44">
</div>
</div>
</div>
<div class="contact_info">
<div class="contact_image">
<img src="image.jpg" width="50" height="50" alt="Profile Picture">
</div>
<div class="contact_name"><span>Caroline Airey</span>
</div>
</div>
</div>
</div>
<div id="x_message" class="inputdata" style="overflow: hidden; display: none;">
<label>Message:</label>
<span><textarea name="x_message" placeholder="Enter a message to send to your contact(s)"></textarea></span>
<div class="clear"></div>
<button class="form_button">Add Contact to Network</button>
</div>
Here is my Jquery:
$( ".checkbox" ).click(function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
You will need the Parent reference to bind the element properly to jquery try this
$(parentObj).on("click",".checkbox",function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
The parentObj is the div or the html element you've appended the html code with ajax call
Use this jQuery method instead:
$(".checkbox").on("click", function()
{
// Your code here
});
This will grab clicks from elements that are dynamically added to your page after it initially loads :)

Categories