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");
};
});
});

Jquery previous .html() element still showing when new element clicked

I have to write code which finds all anchors and attaches a function that displays a popup of the elements text. My code is probably a mess, but I was able to get it working however the issue I have now is:
If I click link 1, then link 2, then click link 1 again, it displays link 2's text however if i click it again it displays the correct text.
I am not sure exactly how to rewrite or go about fixing this code to properly display the element which is clicked, text all the time.
here is a jsfiddle example: http://jsfiddle.net/2aLfL/1/
$(document).ready(function() {
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('a').click(function(){
if($(this).hasClass('selected')){
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
var elText = $(this).text();
$('#elPop').html("<p>" + "<br><br>" + "You just clicked: <br><b>" + elText + "</b><br><br><br>" + "Click anywhere to Close" + "</p>");
console.log(this);
$("#closeWin").click(function () {
$('.anchorpop').hide();
});
}
return false;
});
});
$(function close(){
$(document).click(function(){
$('.anchorpop').hide();
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
});

You're binding the following click handler
$("#closeWin").click(function () {
$('.anchorpop').hide();
});
inside <a> click handler so whenever a link is clicked, multiple handlers are being added.
You can avoid many unnecessary code using toggleClass() method.
You can also bind same event handlers to multiple elements by passing additional selectors.
after all your code boils down to
$(function () {
$('a').click(function () {
var htmlString = "<p>" + "<br><br>" + "You just clicked: <br><b>" + $(this).text() + "</b><br><br><br>" + "Click anywhere to Close" + "</p>"
$('.pop').html(htmlString).slideFadeToggle(function () {
$(this).toggleClass('selected');
});
return false;
});
$("#closeWin, .anchorpop").click(function () {
$('.anchorpop').hide();
});
});
and the custome slideFadeToggle function.
Updated Fiddle

jQuery button. Remove when clicking icon

Im using jQuery ui button to create divs that look like buttons dynamically. Clicking on these divs should open a dialog and clicking its icon should remove the div(button). Ive tried several different approaches but I cant seem to get the result I want.
Closest thing Ive achieved is by using onclick on both the icon & on the div itself, but the problem is that when clicking the icon I would first call the icon's onclick and then afterwards calling the div's onclick, which will cause the dialog to open after the div has been removed.
Ive also tried to add a disable property and set it to true on the div inside the icon's onclick and check for that inside the div's onclick but that dont work(I kinda get why.)
So my question is then: How can I create a button that will open a dialog when clicked on and with a icon that, when clicked on, removes the button?
Code:
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox' onclick='ButtonClicked(this);'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).delegate("span.ui-icon-circle-close", "click", function () {
var btnId = $(this).closest("div").remove().attr("aria-controls");
$("#" + btnId).remove();
});
$('.ui-icon-circle-close').attr('onclick', 'IconCloseClicked(this);');
}
function IconCloseClicked(value) {
$(value).parent().prop("disable", "true");
//alert($(value).parent().attr("id"));
alert("icon");
Remove($(value).parent());
}
function ButtonClicked(o) {
var test = $(o).prop("disable");
alert("div");
if ($(o).attr("disable") == undefined) {
Opendialog();
}
}
function Remove(value) {
$(value).remove();
}
function Opendialog() {
$("#dialog").dialog("open");
}
Ps. Reason why Ive used the button is because it is the widget that looks the most like what I want in jquery ui.
Updated(What I ended up with):
function Add(value) {
var buttonid = "SearchResultBox" + ($("#SearchBoxAddedSearches .SearchResultBox").length + 1);
$("#SearchBoxAddedSearches").append("<div id='" + buttonid + "' class='SearchResultBox'>" + value + "</div>");
$("#SearchBoxTextField").contents().filter(function () { return this.nodeType === 3; }).remove();
$('.SearchResultBox').button({
icons: {
primary: "ui-icon-circle-close"
}
}).click(function (e) {
Opendialog();
});
$('.ui-icon-circle-close').click(function (e) {
$(this).parent().remove();
e.stopPropagation();
});
}
function Opendialog() {
$("#dialog").dialog("open");
}

I'm assuming the icon is a child element of the button div. When the icon is clicked, you need to stop the click event bubbling to the parent div. You can do this with event.stopPropagation()
$('.icon').click(function(e){
e.stopPropagation();
});

Jquery toggle background color

I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});​

On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});

Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});

expand collapse using jquery for tree node not working

I am making tree with the help of jquery in the tree whenever there is more than one child for a particular child i want to gave a toggle effect.it means that there should be a plus icon on click of it tree should expand and minus image should come on click of minus tree should collapse and plus image should come.
how to develop this any working example of tree node will be helpful
In this manner i have used your function
function createSpanImageNode(spnNew) {
var spnImage = document.createElement("span");
spnImage.id = spnNew + "_" + "spn1";
$(spnImage).addClass('SpanPlus');
spnImage.setAttribute('onclick', 'toogleNode("' + spnImage.id + '")');
return spnImage;
}
function toogleNode(spnID) {
debugger;
var dv = $("#" + spnID).parents("div:first");
var chkUl = $(dv).find('ul').length;
if (chkUl > 0) {
if ($("#" + spnID).hasClass('SpanPlus'))
$("#" + spnID).removeClass('SpanPlus').addClass('SpanMinus');
else
$("#" + spnID).removeClass('SpanMinus').addClass('SpanPlus');
$(dv).find('ul').animate({ height: 'toggle' });
}
}
the two actions that it should perform are
1)remove the class with the span and add the class with minus.
2)it should toggle the ul.
both is not working????

http://api.jquery.com/toggle/

<script type="text/javascript">
$(document).ready(function () {
$('.navbar .dropdown-item').on('click', function (e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({"top": -999, "left": -999});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
for full menu you can find here
http://blog.adlivetech.com/how-to-make-vertical-menu-with-plus-minus-toggle/