Jquery - hide show content based on dropdown

Using JQuery is a great way to hide and show content based on a form dropdown


# 1 > Create a dropdown

Create a dropdown using CakePHP

<?= $this->Form->input('network', array(
'onChange' => 'chooseWhich(this.value);', 'options' => array( 'FIRST' => 'first one', 'SECOND' => 'second one' )
)); ?>

Notice 'onChange' => 'chooseWhich(this.value);' has been added to the form->input tag

You need the ID of the element -> If you do not know it you can right click and view the source
-> Eg in this situation the id is: 'SocialNetwork'

# 2 > Create content to be hidden / shown

Create two elements which will both be hidden / shown when the dropdown changes

<span id="FIRST">
<!-- the first content goes here -->

<span id="SECOND">
<!-- the second content goes -->

# 3 > Create the script

Paste the following script below the form. 


function hideAll() {

function chooseWhich(TYPE) {
if (TYPE == 'FIRST') {
} else if (TYPE == 'SECOND') {
} else {
//keep them hidden



Within the 'hideAll()' function you can have any other spans which will be hidden / shown