How can we display different form partials through click in rails

Question

I have a navbar rendering like a partial.

ex: dashboard/menu

In navbar i have a links like mentor, corporate.

When click on those links, it has render different form partials.

Ex:

_menu.html.erb

<a id="mentor" href="dasboard/settings">mentor</a>
<a id="corporate" href="dasboard/settings">corporate</a>

in settings page: mentor and corporate forms within settings page.

<div id="men">
<% form_for() %>
  #mentor fields
<% end %>
</div>

<div id="cor">
<% form_for() %>
  #corporate fields
<% end %>
</div>

jquery and css with in settings page:

#men,#cor{
 display: none;
}
$("#mentor").on("click", function(){
  $("#men").css("display", "block");
)};
$("#corporate").on("click", function(){
  $("#cor").css("display", "block");
)};

But, noting is happening when i click on navbar links. Even i did't get any error.

updated:

I placed nav links within settings page. Its working fine.

But, from menu partial it didn't work.

Answer 1

You are not selecting properly, there are two mistakes in your jquery sccript

1. You are not selecting properly. This selector $("men") won't select any thing, because selector will not men until you add #.
2. css({"display: block"}) This is also wrong approach to add css on any element

Try following

$("#mentor").on("click", function(){
  $("#men").css("display", "block");
)};
$("#corporate").on("click", function(){
  $("#cor").css("display", "block");
)};

Answer 2

The correct code for your solution would be

$("#mentor").on("click", function(event){
  event.preventDefault();
  $("#men").css("display", "block");
});

$("#corporate").on("click", function(event){
  event.preventDefault();
  $("#cor").css("display", "block");
});

Here is the example JSbin

Note: I added the event.preventDefault() to prevent links sending a request to the server, and thus only rendering the loaded code. If you want to render the form by pulling data from the server, you can use remote links.