We Keep Coding

Slide down div on click event

I have simple slide down script that shows div on click event. The problem i have is, that onclick event doesn't work if i have it wrapped in another div. If clickable div doesn't have any parent div it works fine.
I'm using this for multiple div's, where only one is opened at once.
I need open 1 to work
Here's Fiddle
HTML
<div>
<div class="clickMore">open 1</div>
</div>
<div class="clickMore">open 2</div>
<div class="showMore" style="display:none;">
<div>text</div>
</div>
JS
$(function() {
$('.clickMore').on('click', function() {
$('.showMore').not($(this).next('.showMore')).slideUp('fast');
$(this).next('.showMore').slideToggle('fast');
});
});

Working fiddle.
The problem happen since you've two cases and the selector $(this).next('.showMore') will not return always the desired result, since when you've the .clickMore element inside a div the .next() function will not find the element because it's outside of the current div?
My suggestion id to add a condition to make sure if the related .showMore element is directly next to the clicked div or it should be targeted by adding the parent :
$(function() {
$('.clickMore').on('click', function() {
if ($(this).next('.showMore').length) {
var show_more = $(this).next('.showMore');
} else {
var show_more = $(this).parent().next('.showMore');
}
$('.showMore').not(show_more).slideUp('fast');
show_more.slideToggle('fast');
});
});
Short version of condition could be :
$(function() {
$('.clickMore').on('click', function() {
var show_more = $(this).next('.showMore');
show_more = show_more.length > 0 ? show_more : $(this).parent().next('.showMore');
$('.showMore').not(show_more).slideUp('fast');
show_more.slideToggle('fast');
});
});

Try this
$(function() {
$('.clickMore').on('click', function() {
$('.showMore').slideToggle('fast');
});
});

Working Fiddle
$(function() {
$('.clickMore').on('click', function() {
$('.showMore').hide();
var el = $(".showMore");
$(".showMore").remove();
$(this).append(el);
$('.showMore').slideToggle();
});
});
You are able to change the text content dynamically

Jquery: After removing content with a click how do I reset the button with the one I triggered the add function?

So I have this function where I add content on click to a "Favorites page", but when I click the button to remove it from the Favorites tab it removes the content but the button on the main page does not reset, the question is, how do I reset the button to it's original state after clicking the "Unfavorite" button?
https://jsfiddle.net/yjL7L6g7/3/
$(document).ready(function() {
$('button').click(function() {
if ($(this).html() == 'Favorite') {
var $favorited = $(this).parent().parent().parent().clone();
$(this).html('Favorited');
$favorited.find('button').html('Unfavorite');
$($favorited).click(function() {
$(this).remove();
});
$('#favorites').append($favorited);
}
});
});
And my second question related to this code is, how do I add a button to be on the same row with the content that is being added to the "Favorites"? I tried a simple .append(); but it did not suffice as the button got placed in a new row, will .css() suffice?
The questions might be stupid but I am still on my first steps in learning jquery

I'd avoid cloning if possible because there are simpler ways to do what you're trying to do. The code below will create a new button and add it to your favorites page. It will also attach an event to the Remove button to change the text of the Favorited button as well as remove itself after being clicked.
$(document).ready(function () {
$('button').click(function () {
if ($(this).html() == 'Favorite') {
var that = this;
$(this).html('Favorited');
var id = $(this).attr('id');
$('#favorites').append('<button id="' + id + 'Remove" class="ui-btn">Remove</button>');
$('#' + id + 'Remove').click(function () {
$(this).remove();
$(that).html('Favorite');
});
}
});
});
As for your second question, there is CSS that allows elements to live on the same line. For example, if you have two buttons that you want on the same line, it would look something like this:
<button style="display: inline;">Button1</button>
<button style="display: inline;">Button2</button>
Let me know if you have any questions.

How to corectly bind events in a loop

On a page I have couple of divs, that look like this:
<div class="product-input">
<input type="hidden" class="hidden-input">
<input type="text">
<button class="remove">X</button>
</div>
I'm trying to bind an event to that remove button with this code (simplified):
$('.product-input').each(function() {
product = $(this);
product_field = product.find('.hidden-input');
product.on('click', '.remove', function(event) {
product_field.val(null);
});
});
It works perfectly when there is only one "product-input" div. When there is more of them, all remove buttons remove value from the hidden field from the last product-input div.
https://jsfiddle.net/ryzr40yh/
Can somebody help me finding the bug?

You dont need to iterate over the element for binding the same event. you can rather bind the event to all at once:
$('.product-input').on('click', '.remove', function(event) {
$(this).prevAll('.hidden-input').val("");
});
If the remove buttons are not added dynamically, you will not need event delegation:
$('.remove').click(function(event) {
$(this).prevAll('.hidden-input').val("");
});
Working Demo

You need to declare product and product_field as local variables, now they are global variables. So whichever button is clicked inside the click handler product_field will refer to the last input element.
$('.product-input').each(function() {
var product = $(this);
var product_field = product.find('.hidden-input');
product.on('click', '.remove', function(event) {
product_field.val(null);
});
});
Demo: Fiddle
But you can simplify it without using a loop as below using the siblings relationship between the clicked button and the input field
$('.product-input .remove').click(function () {
$(this).siblings('.hidden-input').val('')
})
Demo: Fiddle

javascript jquery accessing the element being clicked

I've got the following list of semibuttons loaded using javascript:
var html ='<ul class="nav well-tabs well-tabs-inverse mb10" id="users">';
html +='<li class="active"><a id="'+this.my.user+'" data-toggle="tab_'+self.my.id+'" class="pestaña">'+this.my.user+'</a></li>';
var users = this.my.community_users;
for (i=0;i<users.length;i++) {
if (users[i].user != this.my.user)
html +='<li><a id="'+users[i].user+'" data-toggle="tab_'+self.my.id+'" class="pestana">'+users[i].user+'</a></li>';
};
html +='</ul>';
$(html).appendTo("#Dashboard");
Note, that the first item in the list is active. I am getting something like this:
Ok, now i code he onclick event to do something when a button is clicked:
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function(e){
// whatever here
});
What I need now is to set active the tab being clicked and set inactive the tab that was active. How can I access both elements to addclass and removeclass active?

You could use following logic:
$(document).on('click', '#users li:not(.active)', function () {
$('#users').find('li.active').add(this).toggleClass('active');
});

Something like this might work. Basically remove the .active class from everything but the element you clicked on. The add the .active class to the element clicked on.
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
$('a[data-toggle=tab_'+self.my.id+']').not(this).removeClass('active');
$(this).addClass('active');
});

I would remove the 'active' class from all the list items first, then add it back to just the only that was clicked.
$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
$('#users .active').removeClass('active');
$(this).addClass('active');
});

Jquery hide div and show div

I have my code on jsfiddle which has 2 divs, where the user can select features by clicking on a div. in the opposite div i have the same item but hidden. how can i replace the hidden class?
this is what i have come up with:
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').prev().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
http://jsfiddle.net/X6xcj/9/

is this:
$(this).find('.feature-options1').hide();
$('#label2').find('.feature-options1').show();
what you are trying to achieve?

$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().next().next().find('#Label2').removeClass('hidden');
});
Try this i may help you.

You should use .parent() not .prev() to get the containing div
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').parent().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
Here you go: http://jsfiddle.net/5W48X/
.prev() gives you the previous sibling element.
.parent() gives you the container (parent) element.
EDIT:
I had not even seen the id's you use on divs yet. This should work as well:
$("#Label1").click(function () {
$(this).addClass('hidden');
$('#Label2').removeClass('hidden');
});
http://jsfiddle.net/6Zbsa/

try this:
$(function(){
$(".feature-addons").on('click', function(e){
var lbl = $(this).next();
$(".feature-addons").next().addClass('hidden');
lbl.removeClass('hidden');
});
});