Javascript accordion function won't run?

Vote count:

0

I'm new to writing Javascript so I'm trying to write my own simple accordion function. I'm trying to make it so when I click on h2 it shows the "accordion-#" div. If the accordion is already open ("display=block"), I want to hide it ("display=none"). When I click on h2, nothing happens. I searched everywhere but I don't see what's wrong with my code:

function initiate(i) {
    var selected = document.getElementById('accordion-'+i).style.display;
    if(selected == "block") {
        selected = "none";
    } else {
    selected = "block";
    }
}

Sample HTML

<h2 onClick="initiate('6')">Project</h2>
<!-- begin code to hide/show -->
<div id="accordion-6" class="accordion">
    <div class="left">
         <p>left column text</p>
    </div>
    <div class="right">
         <p>right column text</p>
    </div>
</div> <!-- end code to hide/show -->

Sample CSS

main {
  margin: auto;
  width: 660px; }

main .accordion {
    padding: 0 10px 30px 10px;
    overflow: auto; }

main .accordion .left {
  width: 200px;
  float: left; }

main .accordion .right {
  width: 420px;
  float: right; }

#accordion-0 {
  display: block; }

#accordion-1 {
  display: block; }

#accordion-2 {
  display: block; }

#accordion-3 {
  display: block; }

#accordion-4 {
  display: block; }

#accordion-5 {
  display: block; }

#accordion-6 {
  display: block; }

#accordion-7 {
  display: block; }

`

asked 1 min ago

user2535802

1