Problems with accordion panels.

0

Hi I was implementing a HIT html that happens to have an accordion in the left panel for instructions and so on for the workers to interact with. Turns out that, every time a work clicks on the accordion the HIT crashes. Sometimes it shows a pop-up warning about leaving the page, others it gives the message:

There was a problem submitting your results for this HIT.
This HIT is still assigned to you. To try this HIT again, refresh the page. If this problem persists, you can contact the Requester for this HIT by clicking "HIT Details" above and then clicking "Contact This Requester" at the bottom of the pop up.

To return this HIT and continue working on other HITs, click the "Return" button on the top or bottom of the right side of the page.

Here is an example code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>

<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

 <p><!-- MTURK VIA output --><input id="text" name="text" type="text" /></p>
 <p><input id="submitButton" name="submitButton" type="submit"/></p>

</body>
</html>
tuco
asked 5 years ago215 views
1 Answer
0

Hi,

Thanks for your patience while we looked into this! The HTML "button" element defaults to a button that submits a surrounding form.

In your case, you want your accordion buttons to be clickable, but not to submit the form (which is why its currently crashing your HITs). To achieve this, specify the type of the button to be "button".

<button class="accordion">Section 1</button> 

would become

<button class="accordion" type="button">Section 1</button> 

You'll need to do this for all your buttons to ensure that they work correctly. I hope that helps!

-Adam J

AWS
answered 5 years ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions