Form Elements To Change Based On Radiobutton Selection

I’m creating a new application where in I’m designing a form where the elements differ based on the selection of radiobuttonlist.

For example -

I have a radiobutton list -

Gender and options are Male and Female.

For Male:

Next element of the form will be textfield Extra Curricular activities: and students can type anything like Judo,Karate,etc.

For Female:

Next element of the form will be Dropdown Menu Extra Curricular activities: has options Dance, Ballet, etc

Based on the selection of the above radiobuttons the next elements should be displayed and the data entered will be converted into JSON format and stored in Database.

Now, to achieve this I have put the same field as dropdownlist in one div and the textfield in another div. I use jQuery to hide and show div respectively.

Note - Extra Curricular activities is used as textfield for Male children and dropdown for Female children.

Am I doing the right way.