Hiding / showing <div> with JavaScript
I would like to understand why my code is not working, better understand where the problem is.
This is my first JavaScript attempt and I just want to show / hide some divs when another div is clicked. Specifically, with the following JavaScript code, I would like to hide all divs (in case the div has already been shown) and then show the div I would 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 when I click on my .title divs nothing happens and I don't know if there is a problem in my JavaScript code or something else I don't know yet.
PS: I added "/ global $, jQuery, alert /" at the top of my JavaScript file because otherwise the compiler gave me the "$" which was in use before it was defined. $ ('. title') click (function () {"error, but I don't know if this solution is correct.
source to share
Your divs description is not a child of your headers, so it won't work. I changed the code a bit as you can see it working here
$('.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, there is an error here:
<script href="description.js"></script>
it should be
<script src="description.js"></script>
source to share
The main problem is that - not <script href="description.js"></script>
should be .<script src="description.js"></script>
src
href
Also yours is .description
not inside your .title
s, so it won't find a matching description and they will all stay hidden.
So, you need to get the following element:
/*global $, jQuery, alert*/
var main = function () {
'use strict';
$('.title').click(function () {
$('.description').hide();
$(this).next().show();
});
};
$(document).ready(main);
source to share