I have obtained some code from a tutorial on coding website called JSFiddle
$(function() {
$('.toggler').click(function() {
$(this).find('div').slideToggle();
});
});<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
div.toggler { background:lightblue; cursor:pointer; }
div.toggler div { display:none; }
I am attempting to recreate this functionality on my own website, but it seems to not be working as expected. The content is displayed, but clicking on it does nothing. Here is the code:
div.toggler { background:lightblue; cursor:pointer; }
div.toggler div { display:none; }<!DOCTYPE html>
<html>
<head>
<link href="design.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$('.toggler').click(function() {
$(this).find('div').slideToggle();
});
});
</script>
</head>
<body>
<div class="toggler"> This is the title
<div> This is the content to be toggled </div>
</div>
</body>
</html>Please note that you can also view the intended functionality by visiting the provided JSFiddle link.