How to make HTML text hidden until clicked on - javascript

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>

Related

Hide / Show multiple items with Jquery

I have searched around and seem to be getting the same answer to all the people who have asked a similar question so please forgive me if it seems simplistic. I am trying to hide/show multiple items at the same time with the pressing of just one button, and it seems the only way I have come about doing so it by handling it with the class, such as below:
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
and the html as follows
<p class="test">If you click on the "Hide" button, I will disappear.</p>
<p class="test">If you click on the "Hide" button, this also disappears.</p>
I dont want to do so using an html selector like
<p>
as in my example because I want to use it for different types of items.
what about using a css class?
$(".btn1").click(function(){
$(".class-to-hide").hide();
});
html
<div class="class-to-hide">
<p>will hide</p>
</div>
<div>
<p class="class-to-hide">will also hide</p>
</div>
there are countless options you could use, just get familiar with your jQuery selectors and take your pick..
you could use class, which is $('.something')
data-target="something", which is $('*[data-target="something"]')
input type="number", which is $('input[type="number"]')
The other option (in addition the answer already presented) is you can use toggle to hide / show (allows you to use 1 button instead of 2):
<p class="test">If you click on the "Hide" button, I will disappear.</p>
<p class="test">If you click on the "Hide" button, this also disappears.</p>
will do both hide and show.
$(document).ready(function(){
$(".btn1").click(function(){
$("p.test").toggle();
});
});
You can use Class Selector (".class")
Selects all elements with the given class.
//It will select all paragraph with the given class
$("p.test").hide();
You should go through all the selectors
Try using the class instead:
$(document).ready(function(){
$(".test").click(function(){
$("p").hide();
});
$(".test").click(function(){
$("p").show();
});
});

Remove a Div class that inside a parent Div with jQuery

I have a div on top of a image. I want use jQuery click event to remove (or change the div class) the div on image click.
Div structure.
<div class="post">
<img class="thumb" src="MyImg.jpg">
<div class="show-div"></div>
</div>
I want to toggle class show-div to remove-div.
Here is my jQuery
$(document).ready(function(){
$(".thumb").click( function(){
$(this).parent().('.show-div').toggleClass('remove-div');
});
});
I have made remove-div class to display none in the css style sheet. but this doesnt seems to work. Also i have tried
$(this).parent().find('.show-div').toggleClass('remove-div');
Please note that this is a PHP while loop and there will be more then one div at this page.
If someone can point me out the right way to do this it will be most appropriated.
Try this:
$(document).ready(function(){
$(".thumb").click( function(){
$(this).parent().find('div.show-div').removeClass('show-div').addClass('remove-div');
});
});
The code given works http://jsfiddle.net/4WDet
However, you're not removing .show-div, so if that is display: block AND your CSS rules are in this order that is your problem.
.remove-div{
display:none;
}
.show-div{
display:block;
}
In which case, switch your CSS styles around
.show-div{
display:block;
}
.remove-div{
display:none;
}
or toggle both classes
$(this).parent().find('.show-div').toggleClass('remove-div show-div');
But the problem then is that you won't find that div again, so you need to change the selector:
$(this).parent().find('.show-div, .remove-div').toggleClass('remove-div show-div');
Working example
.show-div is not a parent of .thumb, but a sibling. Have you tried?
$(this).siblings('.show-div').toggleClass('remove-div');
Note, that this will return an array if there are more than one .show-div sibling.
$(this).siblings().toggle("slow");
try this

Hide a div intitially (in jquery), then click on another and the shown div disappears and is replaced by the hidden div

I want to hide at first then when the user clicks on , then replaces it. Here is the jquery code:
<script>
$(document).ready(function(){
$(".header-1").hide()(function(){
$(".header-0").click(function(){
$(".header-0").hide()(function(){
$(".header-1").show();
});
});
});
});
</script>
<div class="header-0">Issued<br>Appts <span class="glyphicon glyphicon-play" style="font-size:9px;"></span></div>
<div class="header-1">Issued<br>Appts <span class="glyphicon glyphicon-backward" style="font-size:9px;"></span></div>
Your structure is just wrong. You pretty much just have to remove the (function(){ parts and their corresponding end parenthesis and brackets
Here is the correct structure
$(document).ready(function(){
$(".header-1").hide();
$(".header-0").click(function(){
$(".header-0").hide();
$(".header-1").show();
});
});
Demo
If you want to toggle them, then use the following
$(document).ready(function(){
$(".header-1").toggle();
$(".header-0, .header-1").click(function(){
$(".header-0").toggle();
$(".header-1").toggle();
});
});
Demo
What you want is an accordeon.
Check out this tutorial on how to do it: http://www.youtube.com/watch?v=uDD7Qn0-taI
Here you can find the code: http://www.newthinktank.com/2011/03/jquery-video-tutorial-pt-6/
This is called crossfades. In order for it to work as intented, you should place both the divs in a relative parent, make them both ABSOLUTE, top: 0, left: 0 so that they overlap. The first one being visible, the second one hidden, and vice versa. Please note that the "absolute" idea is usefull if you want to "fadeIn() fadeOut()". Else, it does virtually nothing different for simple .hide() and .show().
<div class="relative">
<div class="absolute header-0">CONTENT</div>
<div class="absolute header-1">CONTENT</div>
</div>
<script>
$(document).ready(function() {
// Given the fact that they are both in the same div
$('.relative').children('.absolute').click(function(e) {
// Hides current div, shows the siblings
$(this).hide().siblings('.absolute').show();
});
});
</script>

Hiding Then showing something via jquery

I'm fairly new to Jquery and Javascript in general and I was wondering, how do I change text on a button after hiding something.
as far as i know, you hide something via this code:
$("element").click(function() {
$("element2").hide("slow");
});
and to show something:
$("element").click(function() {
$("element2").fadeIn("slow");
});
so what i want to do is have an article type thing, and when a "hide" button is pressed, it hides all the paragraph text, but leaves another button saying "show"
How do I accomplish this?
You just need one button and change its text. Lets assume all the content is visible from the beginning. Add a button to your HTML and give it an ID so you can easily identify it:
<button id="toggleButton" type="button">Hide</button>
Then bind an event handler to the button which
toggles the visibility of the elements you want to show/hide and
changes the text content of the button
And here it is:
$('#toggleButton').click(function() {
// toggle visibility if all p elements
$('p').toggle();
// Change text based on current text
// If the current text is 'Hide' then we just hid the elements and
// we have to change the text to 'Show' (and vice versa).
$(this).text(function(i, current_text) {
return current_text === 'Hide' ? 'Show' : 'Hide';
});
});
DEMO
Reference: .click, .toggle, .text, conditional operator.
You have to adjust the selector to only match elements you really want to hide, but jQuery has great documentation about all possible selectors.
jQuery's documentation is pretty extensive and spending some time just reading through is worthwhile.
Since you are just starting, I recommend to read http://eloquentjavascript.net/ and/or the MDN JavaScript Guide, and the jQuery tutorial (in that order).
To Hide:
$("element").click(function() {
$("element2").hide("slow");
$("element").text('Show');
});
To Show:
$("element").click(function() {
$("element2").fadeIn("slow");
$("element").text('Hide');
});
Change button value like
$("element").click(function() {
$("element2").hide("slow");
$("#btnID").prop('value', 'Show');
});
$("element").click(function() {
$("element2").fadeIn("slow");
$("#btnID").prop('value', 'Hide');
});
I usually have two buttons, one with text show and another with hide text, then when you click in one of them show one and make all the stuff necessary and hide it shelf.
HTML:
Show
Hide
<p id="textshow" style="display:none"> lorem ipsum</p>
Javascript:
$('#bshow').click(function() {
$('#bhide').fadeIn();
$('#textshow').fadeIn();
$(this).hide();
});
I think this jsFiddle can help you:

jquery to toggle a label

How can I get the label to toggle show/hide? Below is my code and currently it is also displaying show. I would like it to toggle from show to hide and from hide back to show. when show is displayed the div will be hidden but when show is clicked the label will switch to hide and the div will be displayed and when hide is clicked the label will go back to show and the div will be hidden
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<label id="clickMe">Show</label>
<br />
<div id="textBox" style="display: none">This text will be toggled</div>
</body>
</html>
If I read your question right, then I think the following would work:
$('#clickMe').toggle(
function(){
$('#textBox').show();
$('#clickMe').text('hide');
},
function(){
$('#textBox').hide();
$('#clickMe').text('show');
});
JS Fiddle demo.
If you use the attribute for, to define the element to which the label 'connects', and also use class-names, then this can be made more generic and useful:
$('.clickMe').toggle(
function(){
$('#' + $(this).attr('for')).show();
$(this).text('hide');
},
function(){
$('#' + $(this).attr('for')).hide();
$(this).text('show');
});
JS Fiddle demo.
Bear in mind, though, that the label element is used to associate information with specific input elements, as opposed to a generic identifier for arbitrary elements. Ideally, you should use a span, or div, element rather than a label for this purpose.
If you do switch to using non-label elements, then the for attribute shouldn't be used either, in its place I'd suggest (assuming the same connection between what's currently the label and the div) using a custom data-* attribute (such as data-for) to identify the relationship.
Note, also, in the above -final- example, the use of the class instead of the id selector, since an id must be unique within the document.
Use the Toogle with callback feature: http://api.jquery.com/toggle-event/
Then you can set the text for the label in each callback.
The answer here talks about the different toggle api calls.
add the code below before or after your toggle.
http://jsfiddle.net/UuADb/
label = $(this);
if(label.html()=="Show"){
label.html('Hide');
}else{
label.html('Show');
}

Categories