We Keep Coding

How to make HTML text hidden until clicked on

I'm trying to learn how to make HTML text toggle with jQuery, which is pretty easy in itself, but I want the text to be hidden automatically until it is clicked on with a button. I've looked it up and I can't find how to do this. I figured it should be easy, and I have this part
<h4 id="text1">This is some toggleable text</h4>
$(document).ready(function(){
$("#button1").click(function(){
$("#text1").toggle();
});
});
Which works fine as a regular toggle, but this leaves the text there until first clicked on.
Codepen: https://codepen.io/anon/pen/bYYeEB

The jQuery show,hide and toggle functions simply alter the CSS display property to have either display: block; or display: none;.
To start with your element hidden just set the style attribute style="display:none;".

$(document).ready(
function(){
$("#button1").click(toggle);
}
);
function toggle() {
$("#text1").toggle();
}
toggle();
Calling toggle at the bottom will auto hide the element. This still isn't the greatest since the element will show until this code runs.
But you can always change the HTML to read like this:
<h4 id="text1" style="display:none">This is some toggleable text</h4>
Then you don't need to call toggle the first time.

<script>
$(document).ready(function() {
$("#text1").css("display", "none");//you just have to add this line
$("#button1").click(function() {
$("#text1").toggle();
});
});
</script>

toggle div to show hide

I have a simple block of code to hide/show two divs. It works great, the only issue I have is that I need to return the display value to the #MSOZoneCell_WebPartWPQ2 back to table. I have set it to none in the css initially. The last line doesn't seem to take effect.
here is the code:
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').css('display') == 'table';
});
});

You're using == operator
Try this:
$(document).ready(function(){
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').attr('style','display:table;');
});
});

you should use .css( propertyName, value )
Set one or more CSS properties for the set of matched elements.
so your last line should be
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
when you call .css( propertyName )
$('#MSOZoneCell_WebPartWPQ').css('display);
you are Getting the value of said property not setting it
Get the computed style properties for the first element in the set of
matched elements.
Update 1:
please note that Jquery's .show(), .hide() and .toggle() will only work with elements with block display property.
so one way to avoid changing the display property back and forth is to wrap the wanted elements in a div (container) and .toggle() it.
I have created a JSFiddle, I warped each div in a container div with a calss called "toggle" and set initial display value of one of them to "none" using style attribute.
<div class="toggle" style="display:none">
now I toggle between them using this
$('.toggle').toggle();
Update 2:
you can also use .toggleClass() here's another JSFiddle
Add this to your CSS
#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
display: none;
}
add a class to the div you want initially hidden
<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">
toggle the class using this
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggleClass("hiddenDiv");
$('#example_wrapper').toggleClass("hiddenDiv");
});
});
in this example I'm using a class called "hiddenDiv", if you change it make sure the class name is the same in CSS, HTML and JS.

you are sure you need "==" to set the value? or one "="

Firstly == is an equality check. You should use = to set a value.
Secondly, the css() method setter accepts two parameters. The rule to set and the value itself. Try this:
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');

How to remove the style effect with javascript or jquery? [duplicate]

This question already has answers here:
jQuery & CSS - Remove/Add display:none
(14 answers)
Closed 9 years ago.
How to remove the style with jQuery or JavaScript in order to display the div element?
<div style="display: none">display something </div>
If you know ,please share with me . Thanks
PS：Before ,I have tried with jquery.show(), but the effect is a big blank over there

Try like
$('div').css('display','block');
Better you give an class or id to the specific div and try like
Using Id :
$('#div_id').css('display','block');
Using Class :
$('.div_class').css('display','block');

You better assign some id to your div to make it unique and keep the change upto desired element. You can use style property of javascript DOM object to access display or other sub-property.
<div style="display: none" id="id" >display something </div>
Using javascript
document.getElementById('id').style.display = 'block';
Using JQuery, you can use id selector
$('#id').css('display','block');
If you just want to change display property you can use show / hide method instead.
$('#id').show();

document.getElementById('id of the div').style.display = 'block';
should give an Id to the div
Another method is
$('div').css('display','block');

jQuery provide shortcut for this:
$('div').show();

You can show it with the jQuery show method, like this:
$('div').show();
This will show all divs on your page. If you want to only show this particular div, you could give it an id, like this:
<div style="display: none" id="myDiv">display something </div>
And then show it like this:
$('#myDiv').show();

If you just want to show the div you can do this:
$("div").show();
If you want to remove the style tag completely:
$("div").removeAttr("style");
Note: Id recommend giving your div an id or class otherwise either of the above 2 options will do it to all div's not just this one.
e.g: <div id="myDiv" style="display: none">display something </div>
then you would change that div liek this:
$("#myDiv").show();

To remove an style effect :
$('div').css('display','');
From jQuery doc :
$( "#mydiv" ).css( "color", "" ) — removes that property from an
element if it has already been directly applied.
See doc

first you need to identify the div for that give the div an ID or a class attribute
<div style="display: none" id="mydiv">display something </div>
then jQuery
jQuery(function($){
$('#mydiv').show()
})

jQuery: Hide div with no ID

How can I hide a div with no ID? I have an application which creates few stickies. Some of them have no ID and some of the do have. How can I hide the ones with no ID?
The position is not always the same.
This is what I get in the HTML where I want to hide the last one.
Is it possible I can hide the one with no ID? Note that the rest which have ID's, is a number generated randomly.
Thanks alot.

Try this:
$("div.sticky:not([id])").hide();
The main idea is to use :not([id]) selector with element selector.
fiddle: http://jsfiddle.net/57uQ8/

http://sandbox.phpcode.eu/g/d2956/2
<script>
$(function(){
$("div.sticky").each(function(b){
if (!$(this).attr('id')){
$(this).hide();
}
});
});
</script>
will probably do it, assuming you want to show ONLY divs with no IDS and divs with class sticky

How to hide a div with jQuery?

When I want to hide a HTML <div>, I use the following JavaScript code:
var div = document.getElementById('myDiv');
div.style.visibility = "hidden";
div.style.display = "none";
What is the equivalent of that code in jQuery?

$('#myDiv').hide();
or
$('#myDiv').slideUp();
or
$('#myDiv').fadeOut();

$("#myDiv").hide();
will set the css display to none.
if you need to set visibility to hidden as well, could do this via
$("#myDiv").css("visibility", "hidden");
or combine both in a chain
$("#myDiv").hide().css("visibility", "hidden");
or write everything with one css() function
$("#myDiv").css({
display: "none",
visibility: "hidden"
});

Easy:
$('#myDiv').hide();
http://api.jquery.com/hide/

If you want the element to keep its space then you need to use,
$('#myDiv').css('visibility','hidden')
If you dont want the element to retain its space, then you can use,
$('#myDiv').css('display','none')
or simply,
$('#myDiv').hide();

$("myDiv").hide(); and $("myDiv").show(); does not work in Internet Explorer that well.
The way I got around this was to get the html content of myDiv using .html().
I then wrote it to a newly created DIV. I then appended the DIV to the body and appended the content of the variable Content to the HiddenField then read that contents from the newly created div when I wanted to show the DIV.
After I used the .remove() method to get rid of the DIV that was temporarily holding my DIVs html.
var Content = $('myDiv').html();
$('myDiv').empty();
var hiddenField = $("<input type='hidden' id='myDiv2'>");
$('body').append(hiddenField);
HiddenField.val(Content);
and then when I wanted to SHOW the content again.
var Content = $('myDiv');
Content.html($('#myDiv2').val());
$('#myDiv2').remove();
This was more reliable that the .hide() & .show() methods.

$('#myDiv').hide() will hide the div...

$('#myDiv').hide(); hide function is used to edit content and show function is used to show again.
For more please click on this link.