We Keep Coding

jQuery on click again, should hide the box (like toggle)

I have the following example:
https://codepen.io/baidoc/pen/LYVvOZq
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
$(".boxContent").removeClass("show-content");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
});
});
2 Boxes, by default deactivated (hidden), and only once clicked, the content will be shown.
What I'm trying to do: when I click again on the box, it should hide the box (display:none)
I've tried with toggle function, but somehow it doesn't seem to work. What alternative do I have?

What about this?
jQuery(function ($) {
$(".box").click(function() {
var currentActive = $(this).hasClass("active");
$(".boxContent").removeClass("show-content");
$(".box").removeClass("active");
if (!currentActive){
$(this).addClass("active");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
}
});
});

Try this below :
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
if($(".boxContent").hasClass("show-content")){
$(".boxContent").removeClass("show-content");
}else{
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
};
});
});

Display read more button

I want to use a read more button after a text is larger than 300 characters.
I use this jQuery to fix this, but it is not working as I want.
var $j = jQuery.noConflict();
$j('.reviewtekst').each(function() {
var $pTag = $j(this).find('p');
if($pTag.text().length > 300){
var shortText = $pTag.text();
shortText = shortText.substring(0, 300);
$pTag.addClass('fullArticle').hide();
$pTag.append('<a class="read-less-link">Lees minder</a>');
$j(this).append('<p class="preview">'+shortText+'</p><div class="curtain-shadow"></div><a class="read-more-link">Read more</a>');
}
});
$j(document).on('click', '.read-more-link', function () {
$j(this).parent().hide().prev().show();
});
$j(document).on('click', '.read-less-link', function () {
$j(this).parent().hide().next().show();
});
See this JSFiddle: https://jsfiddle.net/8cm67cun/1/
How can I make this work, to display the <a> class outside the <p> class.

Here is updated version https://jsfiddle.net/8cm67cun/2/ now it works fine with a tag outside the p
$j(document).on('click', '.read-more-link', function () {
$j(this).hide().parent().find('.preview').hide().prev().show();
});
$j(document).on('click', '.read-less-link', function () {
$j(this).parent().hide().next().show();
$j(this).parents('.reviewtekst').find('.read-more-link').show();
});

How to change text to textbox on clicking it

Here is the fiddle for changing the label's value by clicking on it.
But i don't want to do it while i click on the edit (href)
I just want to click on the name and change it to textbox and while i take the mouse outside it should change back to label
How can i do this ?
Here's the jquery code i have
$(document).ready(function() {
$('a.edit').click(function () {
var dad = $(this).parent().parent();
dad.find('label').hide();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
});

How about something like this. Demo
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
$(this).siblings('.edit-input').show();
});
$('.edit-input').focusout(function() {
$(this).hide();
$(this).siblings('.control-label').text($(this).val()).show();
});
});

You could try it with this modified version of the fiddle:
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
var dad = $(this).parent();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
It doesn´t set the default value that was in the label before though.

Just change the target of your click function from:
$('a.edit').click(function () {
to
$('.text-info').click(function () {
You could also add a hover function if you want the input to be hidden on mouseout rather than when clicking outside. For example:
$('input[type=text]').hover(function () {
}, function () {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
Here your adjusted fiddle.

How can I select dynamically div to draggable stop function?

Here is my code:
$(document).ready(function () {
var $div = $('<div>my test</div>').draggable().appendTo('body');
$div.attr('id', 'Test');
});
//$('div#Test'.draggable({
$('div').draggable({
stop: function (event, ui) {
var draggableId = $(this).attr("id");
alert(draggableId);
}
});
While dragging the dynamically div, I expected the stop function will show alert. But it not work. What am I doing wrong?
Thank you in advance for the help!

When you create your div element you call draggable on it, but without any settings. Try this:
var draggableSettings = {
stop: function (event, ui) {
var draggableId = $(this).attr("id");
alert(draggableId);
}
}
$(document).ready(function () {
$('div').draggable(draggableSettings); // any pre-existing divs
// the dynamically created div
var $div = $('<div>my test</div>', { 'id': 'Test').draggable(draggableSettings).appendTo('body');
});
Note also that the call to draggable on load needs to be placed within the document ready handler.

How can I get a list element to be "toggled" (JQuery) and then when this animation is done removed(), all upon a mouse click of the img in the <li>?

As it stands the remove function doesn't work. Any suggestions?
var toggle = new function() {
$(document).on('click', 'img', function () {
$(this).parent().toggle('slide');
})
}
var remove = new function() {
$(document).on('click', 'img',
setTimeout(function () {
$(this).parent().remove();
}, 1000);
)
}

The function your are looking for is .queue(). It will execute a provided callback after the previous animation has finished:
$(document).on('click', 'img', function() {
var $entry = $(this).parent();
$entry.toggle('slide').queue(function(next) {
$entry.remove();
next();
});
});
Working example: http://jsfiddle.net/rbBgS/