1

I just inserted a very simple piece of javascript in my HTML, while it doesn't work at all, I checked few times but cannot find out what's wrong.

The javascript I inserted is adding a expanding/collapsing function. When I paste my HTML, CSS and JS separately in StackOverflow's code pad it runs well, but when I put them together JS part just doesn't work.

Thanks in advance!

<!DOCTYPE html>
<html>
<head>
<script>
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
  if ($(this).hasClass("opened") == true) {
    $(this).next().slideUp("slow");
    $(this).removeClass('opened');
  } else {
    $(".opened").next().slideUp("slow");
    $(".opened").removeClass("opened");
    $(this).addClass('opened');
    $(this).next().slideDown("slow");
  }
});
</script>
</head>

<style type="text/css">
.accordionOm {
  position: relative;
  padding: 10px 0 10px 30px;
  margin: 0;
  font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.accordionOm:hover {
  color: #000;
}
.accordionOm:before,
.accordionOm:after {
  content: "";
  position: absolute;
  background: #333;
  display: inline-block;
}
.accordionOm:before {
  width: 20px;
  height: 2px;
  left: 0;
  top: 22px;
}
.accordionOm:after {
  width: 2px;
  height: 20px;
  left: 9px;
  top: 13px;
  transition: transform .5s;
  transform: rotate(0);
}
.accordionOm.opened:after {
  transform: rotate(90deg);
}
.accordionOm + div {
  border-left: 4px solid #999;
  padding: 0 15px;
  margin-left: 8px;
  font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
  color: #666;
}
</style>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
</body>
</html>
Sherman_Meow
  • 247
  • 3
  • 13

1 Answers1

1

Put your scripts below the tag where you reference jQuery. Since it is executed from top to bottom, the browser hasn't loaded jQuery when your script is run so nothing happens.

<!DOCTYPE html>
<html>
<head>

</head>

<style type="text/css">
.accordionOm {
  position: relative;
  padding: 10px 0 10px 30px;
  margin: 0;
  font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.accordionOm:hover {
  color: #000;
}
.accordionOm:before,
.accordionOm:after {
  content: "";
  position: absolute;
  background: #333;
  display: inline-block;
}
.accordionOm:before {
  width: 20px;
  height: 2px;
  left: 0;
  top: 22px;
}
.accordionOm:after {
  width: 2px;
  height: 20px;
  left: 9px;
  top: 13px;
  transition: transform .5s;
  transform: rotate(0);
}
.accordionOm.opened:after {
  transform: rotate(90deg);
}
.accordionOm + div {
  border-left: 4px solid #999;
  padding: 0 15px;
  margin-left: 8px;
  font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
  color: #666;
}
</style>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
  <p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
    quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
</body>
<script>
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
  if ($(this).hasClass("opened") == true) {
    $(this).next().slideUp("slow");
    $(this).removeClass('opened');
  } else {
    $(".opened").next().slideUp("slow");
    $(".opened").removeClass("opened");
    $(this).addClass('opened');
    $(this).next().slideDown("slow");
  }
});
</script>
</html>
Steve
  • 9,335
  • 10
  • 49
  • 81