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 specific class element with onclick

Currently I have an unordered list of about 10 of these "container"s.
Each container has a description and a "help-more-content" button.
<div id="item" class="container">
<div class="item">UniqueIdentifierInt</div>
linkName
<div class="trackUri">someLinkUrlString</div>
<div class="description" style="display: none;">DescriptionString</div>
<a class="mt-help-more-content" href="#"></a>
</div>
The functionality is supposed to be when you hit the "help-more-content" button for this container, it will then display that containers description.
However at the moment when the button is clicked, it shows the description for ALL containers on the screen.
Here is the current on click
.on("click", ".mt-help-more-content", function(e) {
$('.description').toggle();
}
Now obviously this toggle function is being called on all "description" elements. How can I specify for it to only act on the current container?
I've checked out other answer here, here, and here but to no real avail.
Is it possible to only toggle the specific class? It doesn't seem you can toggle by an id.
I am new to javascript/html since my background is with Java, so apologies if this is something simple.
Any help is greatly appreciated thank you.

$.prev will do the trick:
.on("click", ".mt-help-more-content", function(e) {
$(this).prev('.description').toggle();
}

This should work:
.on("click", ".mt-help-more-content", function(e) {
$(this).siblings(".description").toggle();
}

Toggle css of 1 of multiple classes of the same name

I have dynamically created divs..
<div class="container"></div>
Each div has an input element within it..
<div class="container">
<input type="button" class="container_button" value="toggle" />
</div>
My goal is to minimize only the container div of the button clicked..
$('.container_button').onclick(function() {
$('.container').css('height','20px');
});
How can I achieve this when multiple divs of the same class exist?

jQuery object doesn't have onclick method, you can use on method instead, as you are generating the element dynamically you should also delegate the event.
$(document).on('click', '.container_button', function() {
$(this).parent('.container').css('height','20px');
// ^--- clicked element
});

You need to find .container relative to the DOM element that was clicked.
$('.container_button').click(function () {
$(this).closest('.container').css('height', '20px');
});

Find a class inside the parent of a clicked element

I'm trying to find the class .post-info inside the parent of a clicked element, .toggle-info. Right now all the .post-info's on the page toggle. I'm trying to get only that one .post-info to toggle inside it's parent container, .post.
<div class="post">
<div class="toggle-info">Toggle Btn</div>
<div class="post-info">
<p>Toggle this content</p>
</div>
</div>
$(".toggle-info").click(function () {
$(".post-info").animate({
height: "toggle",
opacity:"toggle"
}, 520, 'swing');
});
Thanks in advance for the help!

You can do it like this:
$(this).closest(".post").find(".post-info").animate(...)
This goes up the parent chain from where the click happens and finds the .post class, then finds the .post-info in that parent and then applies the animation to that. This is very flexible in that .post-info could be anywhere in the .post parent and this would work. You can see it work here: http://jsfiddle.net/jfriend00/AeYZU/
For this particular exact HTML, you could also use this:
$(this).next().animate(...)
This would get the next sibling after the div that was clicked on. Note, that this method (as opposed to the previous one) relies on the exact position of .post-info as the next sibling and will break if its position changes. You can see this one work here: http://jsfiddle.net/jfriend00/qGCLx/

jQuery toggle method issue

When using jquery-ui-1.8.15.custom.min toggle method, the element next to the target element is always hidden.
Here is the test page: http://jsfiddle.net/dassio/CLrMx/9
I want the div with class name suggestion to toggle between hidden and show when you click the button, but why the red line is always missing?

This should do the job:
http://jsfiddle.net/CLrMx/15/
Your script was accidentally hiding your text. Cleaned it up a bit so it olny does the necessary.

I found the problem:
<div id="config" class='name ui-widget-content ui-corner-all'>
<button id="details">show details</button>
</div>
I add the name class name to the parent div around the button, and when the event bubble up to the parent div, the following code:
$(".name" ).click(function() {
var clicked = $(this);
var suggestion = clicked.next();
suggestion.toggle("fold",200);
return false;
});
was called and toggle off the <h3> element which is the next element of the parent div.