I have a page with multiple posts divs and have a hidden comment form for each post. What is the best way to utilize JQuery/JavaScript to display only the comment form for that post after a button or link is clicked.
<div class="post">
<p>Some Content</p>
Comment
<div class="commentForm" style="display:none"></div>
<div>
$('.commentButton').on('click', function(){
$(this).next().slideToggle();
});
Delegate the click event to the commentButton which should toggle the commentForm. Inside of the event, move to the next element, and perform a slideToggle(). In this way, clicking on the comment button will both show and hide only the next one.
Further to the point, if you wish to hide all other commentForms so only 1 is open at a time, you can simply add:
$('.commentForm').hide();
before you perform the .slideToggle().
put id in your div
<div class="commentForm" id="myID" style="display:none"></div>
now in script
if(someCondition) {
document.getElementById('myID').style.display = 'hidden';
}else {
document.getElementById('myID').style.display = 'visible';
}
next() might not always be working because many times an element is not after the button (that triggers the action) itself.
If that is the case you can do the following:
$('.commentButton').on('click', function(){
$(this).parents('.post:eq(0)').find('.commentForm(0)').show();
// or: fadeIn(500); / fadeOut(500);
// or: slideToggle(); / slideUp(); / slideDown();
// or: css('display, 'block'); / none
});
This will find it's first parent with the class post and than the element inside it with the class commentForm even if its inside another element or in another etc.
In the example of yours you dont nescesaraly need it, but think of just selecting elements that do not have any classes or IDs :)
Related
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>
Think of the following HTML code to apply Jquery:
HTML code:
<div id="outer_div">
<div id="inner_div_1"></div>
<div id="inner_div_2"></div>
<div id="inner_div_3"></div>
</div>
By default, the "outer_div" is hidden. It appears while clicked on a button using Jquery show() function.
I wanted to do the following: On click within anywhere of "outer_div" excluding the area within "inner_div_1" , the "outer_div" would again be hidden. I failed while tried the following codes. What should I amend?
Attempted Jquery 1:
$("#outer_div:not(#inner_div_1)").on("click",function(){
$("#outer_div").hide("slow");
});
Attempted Jquery 2:
$("#outer_div").not("#inner_div_1").on("click",function(){
$("#outer_div").hide("slow");
});
Your support would be highly appreciated.
You need to consider that a click in the inner div is also a click on the outter div. That being said, you just need to check the target and target parents :
$("#outer_div").on("click",function(e){
if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});
You can use some of the data in the event
$("#outer_div").on("click",function(e){
if( // Fast check to see if this is the div
e.target.id !=='inner_div_1'
// We limit the 'closest()' code to the outer div. This adds children to the exclude
&& $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
alert('good click');
}
});
This is a solution for your code now, this works perfect when not too many excluding objects. But no wildcard selectors, which is nice.
And a jsFiddle demo.
Other properties can be used to, like a class:
$("#outer_div").on("click",function(e){
if( e.target.className!=='even'
&& $(this).closest('.even, #outer_div')[0].id=='outer_div'){
alert('yay, clicked an odd');
}
});
I made 7 lines, gave the even ones a class 'even'.
An example use case would be a registration form that was split into several steps. I.e. there are three steps:
Container 1 is visible
Container 2 is hidden
Container 3 is hidden
User clicks next button:
Container 1 is hidden
Container 2 is visible
Container 3 is hidden
User clicks next button:
Container 1 is hidden
Container 2 is hidden
Container 3 is visible
User clicks previous button:
Container 1 is hidden
Container 2 is visible
Container 3 is hidden
and so on. This is what I tried:
$('#btn-next-step').live('click', function(){
$('.form-step').each(function(){
if($(this).is(':visible')){
$(this).hide();
}else{
$(this).show();
return false;
}
});
});
HTML:
<form>
<div class="container-fluid form-step form-step1">
step1
</div>
<div class="container-fluid form-step form-step2">
step2
</div>
<div class="container-fluid form-step form-step3">
step3
</div>
</form>
Here is my fiddle: http://jsfiddle.net/feFcu/
Can you help me with the logic. Any ideas how to realize this kind of behaviour?
First, store the visible one in a variable. Then hide all of them, and use .next('.form-step') to find the one that follows the previously visible one, and .show() it.
$('#step').on('click', function(){
// Find the visible one and store in a variable
var showing = $('.form-step:visible');
// Hide all of them (including the currently visible one)
$('.form-step').hide();
// Find the next one with .next() and make it visible
showing.next('.form-step').show();
});
Here is the updated jsfiddle example...
Note that I have replaced .live() with .on(), since .live() is now deprecated.
using this line will provide you with an array of the steps:
var steps = document.getElementsByClassName('.form-step');
now you can itterate through the steps by tracking which step is active with a seperate variable.
I am trying to use a jQuery listener to listen for a users clicks on the html body and perform a specific function if anywhere on the body has been clicked except for a specific div and the children within that div.
The idea is that the div is a popup type element and instead of having to have a close button that the user can click, they should just be able to click anywhere on the page besides that div and it will automatically close.
I have been using this listener:
var initialClick = false;
$('body').on('click.addPhoneListeners', function(event) {
var target = EventUtility.getTarget(event);
if(initialClick) {
if(target.parentNode.id != clone.id && target.id != '') {
finish();
};
}
initialClick = true;
});
Which listens for all clicks on the body and unless the click comes from within the element I want the user to be able to interact with, it closes. Unfortunately this only works with a div that has only one level of children. As soon as I start getting multiple hierarchies such as this:
<div id="addressContainer">
<div id="address" class="hidden row">
<div class="row">
<div id="address.primary" class="hidden">P</div>
<div id="address.type"></div>
<div id="address.street"></div>
<div id="address.editButton" class="hidden"><a id="addressEditButton">Edit</a></div>
<div id="address.deleteButton" class="hidden"><a id="addressDeleteButton">Delete</a></div>
</div>
<div class="row">
<div id="address.city"></div>
<div id="address.state"></div>
<div id="address.zip"></div>
</div>
<input type="hidden" id="address.id"></input>
</div>
</div>
The target.parentNode.id gives me the objects parent element as opposed to the addressContainer id and thus does not work. Is use the top level parent from within nested elements? Other elements will be using this same code, so it has to work on both divs with just one level and div's with multiple.
UPDATE: Found a few excellent solutions, thanks guys. I do however have one other question. Refer to my code above where I set an initialClick boolean to false, then set it to true. I am doing this because for some reason if I don't, when I go to add the popup div, the initial click from the button used to set that popup fires the listener and closes the popup before I have a chance to do anything. This has been my solution around the problem, but is that the only way? Or am I just setting the listener slightly incorrect?
I usually do something like this:
$(document).click(function(e) {
// hide popup
});
$('#popup_div').click(function(e) {
e.stopPropagation();
});
That way the clicks from your popup never propagate to the document, so the close function never fires.
Replace
if(target.parentNode.id != clone.id)
with
if ($(target).closest("#" + clone.id).length === 0)
(I left the second clause alone since it didn't seem related to your question.)
This tries to find the closest ancestor with ID equal to clone.id. If none is found, an empty jQuery object is returned (i.e. one with length === 0), which is what we test for.
Incidentally: jQuery normalizes event.target, so you can just use that instead of whatever custom monstrosity EventUtility.getTarget(event) embodies.
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.