When answer 2 more info expand is clicked, it expands on top of the first one, not below. Same if the expand is clicked for the first answer

app/assets/javascripts/polls.js.coffee

@@ -26,3 +26,19 @@ App.Polls =
           token_message.html(token_message.html() + "<br><strong>" + @token + "</strong>");
           token_message.show()
     false
+
+    $(".zoom-link").on "click", (event) ->
+      element = event.target
+      answer = $(element).closest('div.answer')
+
+      if $(answer).hasClass('medium-6')
+        $(answer).removeClass("medium-6");
+        $(answer).addClass("answer-divider");
+        unless $(answer).hasClass('first')
+          $(answer).insertBefore($(answer).prev('div.answer'));
+      else
+        $(answer).addClass("medium-6");
+        $(answer).removeClass("answer-divider");
+        unless $(answer).hasClass('first')
+          $(answer).insertAfter($(answer).next('div.answer'));
+

app/views/polls/show.html.erb

@@ -80,8 +80,7 @@
     <div class="row padding">
 
       <% @poll.questions.map(&:question_answers).flatten.each do |answer| %>
-        <div class="small-12 medium-6 column end" id="answer_<%= answer.id %>"
-             data-toggler="medium-6 answer-divider">
+        <div class="small-12 medium-6 column end answer <%= cycle('first', '') %>" id="answer_<%= answer.id %>">
 
           <% if answer.description.present? %>
             <h3><%= answer.title %></h3>