Hiding/Showing <div> with JavaScript
Question
I would like to understand why MY code doesn't work, to understand better where is the problem.
This is my first JavaScript try, and I simply want to show/hide some divs when clicking on another div. Specifically, with the following JavaScript code, I would like to hide all the divs (in case a div was already shown), and then show the div I'd like to show.
These are the files:
index.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript First Try</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script href="description.js"></script>
</head>
<body>
<div class="articles">
<div class="title"><h3>Mario regala collana a Sandrone</h3></div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="title"><h3>Mario regala collana a Silvia.jpg</h3></div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="title"><h3>Mario regala collana a Cazzo</h3></div>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
main.css
body {
font-family: Helvetica-light;
}
.title {
height: 25px;
border-bottom: 1px solid #a0a0a0;
}
.description {
display: none;
}
description.js
/*global $, jQuery, alert*/
var main = function () {
'use strict';
$('.title').click(function () {
$('.description').hide();
$(this).children('.description').show();
});
};
$(document).ready(main);
The problem is that when I click on my .title divs, nothing happen, and I don't know if the problem is in my JavaScript code or there's something else I still don't know.
PS: I added the "/ global $, jQuery, alert /" at the top of my JavaScript file, because otherwise the compiler gives me the " '$' was used before it was defined. $('.title')click(function (){ " error, but I don't really know if it is the right solution.
2 answers
solution1
2 ACCPTED 2014-12-19 00:25:42
Your description divs are no children of your title divs, so it won't work. I've altered the code a little bit as you can see here working
$('.title').click(function () {
$('.description').hide();
$(this).children('.description').show();
});
HTML:
<div class="articles">
<div class="title"><h3>Mario regala collana a Sandrone</h3> <!-- removed the closing </div> tag -->
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div> <!-- and added it here -->
<div class="title"><h3>Mario regala collana a Silvia.jpg</h3>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>
<div class="title"><h3>Mario regala collana a Cazzo</h3>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
Also, you have a error here:
<script href="description.js"></script>
this should be
<script src="description.js"></script>
solution2
1 2014-12-19 00:23:24
The main issue is that <script href="description.js"></script> should be <script src="description.js"></script> - src not href .
Also your .description s are not inside your .title s, so it won't find the related description and they will all stay hidden.
So you need to get the next element instead:
/*global $, jQuery, alert*/
var main = function () {
'use strict';
$('.title').click(function () {
$('.description').hide();
$(this).next().show();
});
};
$(document).ready(main);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.