Within my Rails application (which is utilizing Bootstrap's grid system), I am featuring a blog post within the left column. On the right side, I have integrated a jQuery toggle effect to reveal a quick form for user interaction such as leaving comments.
To activate this form, I have configured my jQuery script to toggle it when a paragraph tag is clicked, successfully functioning in doing so. However, the issue arises where the form with the id of #exampleToggle ends up posting at the very top of the column after toggling.
Query: How can I ensure that the form/exampleToggle not only toggles in but appears next to the specific paragraph tag that triggers its display?
<div class="col-md-8">
<% @posts.each do |post| %>
<h2 id="title"><%= post.title %></h2>
<p id="category"><%= post.category %></p>
<div id="text"><%= markdown(post.content) %></div>
<% end %>
</div>
<div class="col-md-4">
<div class="exampleToggle">
<%= form_for :cements do |f| %>
<div class="form-group">
<div class="field">
<%= f.label :username %><br>
<%= f.text_field :username, class: "form-control" %>
</div>
</div>
<div class="form-group">
<div class="field">
<%= f.label :post %><br>
<%= f.text_area :post, class: "form-control" %>
</div>
</div>
<div class="actions">
<%= f.submit "Save", class: "btn btn-success-outline" %>
</div>
<% end %>
</div>
<script>
$(document).ready(function(){
$( ".exampleToggle" ).hide();
$("p").click(function(){
$(".exampleToggle").toggle();
});
});
</script>
If the page were static, resolving this would be relatively straightforward. For instance, having three paragraph tags arranged within corresponding rows using the grid system and triggering the form to appear within its respective row via the correct id selector.
Given that the content is dynamic due to potential paragraphs generated by the Rails loop, the earlier solution fell short.
Furthermore, I am open to abandoning the use of the Bootstrap grid if a more effective approach exists. Currently, I have allocated space on the right column for placing the form - the challenge lies in positioning the exampleToggle adjacent to the relevant paragraph tag upon activation.
Is achieving this level of functionality possible?