Develop Reference

Using Jquery, hide a div that is not existing yet, but will exist [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 1 year ago.
I want to hide a div using JQuery on click event of another div. The problem is that the div that I want to hide is actually created only when I click on the existing div.
Let me explain with code example:
HTML:
<div class="first">I already exist and I create the second div when I am clicked</div>
<div class="second">I do not exist yet, I am created when first div is clicked</div>
The above is happening by another piece of code that another developer wrote.
I want to write another piece of code that will hide the second div when its created right after first div is clicked.
I do not have the permission to change the original dev's original code.
My JQuery that is not working:
$(".first").on("click",function() {
$(".second").hide();
});

You should use this, cause you have to make this delegate.
explanation: https://api.jquery.com/on/
$("body").on("click", ".first",function() {
$(".second").hide();
});

Using the fadeout method with append() [duplicate]

This question already has answers here:
jQuery - Appending a div to body, the body is the object?
(6 answers)
Closed 7 years ago.
I have the following code:
$('body').on('click' , function(){
$('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>').fadeOut(2000);
});
My intent was to add the div and then remove it with a fadeout effect using the fadeout() function , now obviously the above code fades out the entire html document.
I have seen a few similar threads of SO, but they are with the fadeIn effect and the solution does't apply , also i checked the documentation and there is no callback function available for the append() and appendTo() which could have been a posible solution to my problem, so how do i go about fading the div that i added using the append() method ?

Use appendTo as this will return the appended div instead of body:
$('body').on('click', function(){
$('<div class="ajax-success"><p>Its Done !!!</p></div>').appendTo( this ).fadeOut(2000);
});

Your target is body so that is what fades out. Find a way to target the div you want. One of the easiest ways would be:
$('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>')
.find('.ajax-success')
.fadeOut(2000);
This presumes there is only one 'ajax-success'-classed element on the page. If more, find a way to make your addition unique.

Using `.toggle()` rather than applying a class to show content

I'm working on a simple website to use at a conference and I'm looking for some help understand the implications of two ways to achieve an effect:
Using .toggle() to show or hide content
This is the method I started with because it is an intuitive action to tap an element to have it's content appear. However, a problem arises when I try to limit one open div at a time.
Summary I'm having trouble limiting the number of opened elements.
Applying an active class with jQuery
Using this method, I can display the hidden content by selecting the child element (see code below), but this stops the user from closing the content by tapping it again. Because I'm expanding divs horizontally, this isn't ideal because of the scroll space that's added.
Summary: How do you close the active div on a second click with this method?
CodePen Demo - Staged site
Relevant Code
This method is using CSS to apply the active class. It works, but like I said above, I'm having a hard time removing the active class from an element tapped again. Use the demo linked above to see how the toggle action works on the page (uncomment lines 8 and 9).
$(".title").click(function() {
//remove active class from other elements
$('.post').removeClass('active');
// Bind to the div
$post = $(this);
// Set active class on .post to control scroll position
$post.parent().toggleClass('active');
// Toggles the hidden .content div
//$post.next().toggle(250);
$('html, body').animate({scrollLeft: $('.active').offset().left},500);
});
The accompanying .active CSS:
.post .content {
display:none;
}
.active {
margin-top:-120px;
}
/* Shows the content div rather than toggling with jQuery */
.active > .content {
display:block;
}
Is there a way I can allow both behaviors (tap to open/close, one open div at a time)? Which method is best suited for that?

You certainly can use toggle() while hiding the other ones. Try something like this:
$(".title").click(function() {
$('.post').not($(this).parent()).hide();
$(this).toggle();
$('html, body').animate({scrollLeft: $(this).parent().offset().left},500);
});
Update: changed .not(this) to .not($(this).parent()) as .title is always child of .post.

Slightly optimised version of #Daniel's solution
$('.title').click(function() {
var clickedPost = $(this).parent('.post')
clickedPost.toggle().siblings('.active').hide();
$('html, body').animate({scrollLeft: clickedPost.offset().left},500);
});
Local var: If you access this, or any other DOM element more than once inside a scope, it's always more efficient to assign it to a local var than wrap it in a JQ object multiple times.
SIblings selector: I don't have a benchmark for this, but running a selector on a subset of the DOM rather than the whole DOM seems intuitively faster. This is more best practice than a large performance hit, but all the little functions add up too.
Chaining JQuery functions: Most JQ functions that act on a JQ element return that element. I can't say that this is more efficient but it's certainly more concise, but this all depends on personal preference.

With very little code you can do this with toggle.
$(".title").click(function() {
$(".post").hide();
$(this).children(".post").toggle();
});
I made it as simple as possible to show the functionality which you could then extend on.
Here is a jsfiddle
EDIT update after comment
I have edited it to now only show 1 at a time and if the 1 currently being shown is clicked it hides it
I also elected to use slideUp() and slideDown() as it seemed to better suit your needs
$(".title").on("click", function(){
if($(this).children(".post").is(":visible")){
$(this).children(".post").slideUp();
}else{
$(".post").not($(this).parent()).slideUp(500);
$(this).children(".post").slideDown(500);
}
});
updated jsfiddle

How do I make a list which only appears when a <button> is clicked? [duplicate]

This question already has answers here:
toggle show/hide div with button?
(8 answers)
Closed 8 years ago.
I'm trying to make a button which when clicked, makes a list appear/disappear.
How would I go about linking the two?
Would Javascript be the best option for this, or can this be achieved with CSS?

from what i understand, maka div with all the contents that you need to show on click. then write on click function for the button and use show() or toggle function to show the div.
$( "#buttonid" ).click(function() {
$('#divtoshow').show();
});
instead of show() you can use toggle() also.

jQuery will help you here.
You can use the click event along with show to achieve this

Using jquery it is very simple.
$("#buttonID").on('click',function(){
$("listID").toggleClass("contentVisibulity");
});
css
.contentVisibulity{
display:none;
}
Jquery Doc

How to collapse a div with jQuery without a id

I have a list of questions and answers grouped in different divs. I would like to collapse them when a click event is fired that is placed on the question. I have read the examples from the Twitter Bootstrap page but I would like to tricker the event with Javascript and not with data-attributes. With data-attributes every question needs a unique id and this will hard to maintain in the future. I want to trigger the class ".collapse"
Code: http://codepen.io/anon/pen/grdnA

Try this example. You can always modify it according to the element being watched for click and the element to toggle.
jsFiddle
You can use slideToggle() instead of toggle() to get the collapsing effect.
Regards

Something like this? Remember to include jQuery library
$('[data-toggle="collapse"]').on('click', function () {
$(this).closest('div.panel').find('.collapse').toggle('')
});
DEMO