Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Muhammad Rizwan
8,595 PointsI have few button/tags that I want to use click function to show a paragraph. I used the following code.
I have following code, once i click one button/id it shows then if i click other tag it shows both tag. how could i unbind it?
$(".business").hide();
$(".lovep").hide();
var overlay = $('<div id="overlay"></div>');
var popup =$(".business");
var lovep =$(".lovep");
$("body").append(overlay);
overlay.append(popup);
overlay.append(lovep);
$("#business").click(function() {
popup.show();
overlay.show();
// body...
});
$("#lovep").click(function(){
lovep.show();
overlay.show();
});
overlay.click(function(){
overlay.toggle();
});
4 Answers
wuworkshop
3,429 PointsInstead of using the append method to append both business and lovep elements to the overlay element, you could instead use jQuery's .html() method to do the following:
$(".business").hide();
$(".lovep").hide();
var overlay = $('<div id="overlay"></div>');
var popup = $(".business");
var lovep = $(".lovep");
$("body").append(overlay);
$("#business").click(function() {
popup.show();
overlay.html(popup);
overlay.show();
});
$("#lovep").click(function(){
lovep.show();
overlay.html(lovep);
overlay.show();
});
overlay.click(function(){
overlay.toggle();
});
Here's a JS Bin demo for you to check out: http://jsbin.com/solocu/4/edit?html,js,output
Muhammad Rizwan
8,595 Pointswow this works, thank you so much. could you explain to me why .html not .append?
wuworkshop
3,429 PointsI'm just going to be lazy and have the jQuery API docs explain it (the bold emphasis is mine), .append():
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements. The .append() method inserts the specified content as the last child of each element in the jQuery collection
versus .html():
Description: Set the HTML contents of each element in the set of matched elements. When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.
In short, .append only inserts content, .html inserts content while also replacing whatever content was already in that element.
Muhammad Rizwan
8,595 Pointsthank you so much. you are great
wuworkshop
3,429 PointsNo problem. You should definitely read those API doc links. There's a couple of Notes regarding Internet Explorer 8 and up if you care about potential cross-browser issues.
Muhammad Rizwan
8,595 Pointsok, i will do so.
Ryan Duchene
Courses Plus Student 46,022 PointsRyan Duchene
Courses Plus Student 46,022 PointsEdited your post to add syntax highlighting. :)