I have a collection of thumbnail images and I want to update the content inside them upon clicking. However, whenever I add new content, they appear on a separate line instead of staying inline.
Here is the link to the jsfiddle example:
For instance, if I try to add "something" to the specific div with id "boogie":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<title>TITLE</title>
<style>
.thumbContainer {
width: 200px;
}
.thumb {
width: 95px;
height: 95px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<div>
<div class="thumbContainer">
<div id="boogie" class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
<script>
(function() {
$(".thumb").bind("click", function() {
$("#boogie").html("something");
});
})();
</script>
</body>
</html>