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>

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

# 3 > Create the script

Paste the following script below the form. 

<script>

function hideAll() {
$("#FIRST").hide();
$("#SECOND").hide();
}
hideAll();

function chooseWhich(TYPE) {
hideAll();
if (TYPE == 'FIRST') {
$("#FIRST").show();
} else if (TYPE == 'SECOND') {
$("#SECOND").show();
} else {
//keep them hidden
}
}
chooseWhich($('#SocialNetwork').val());
</script>

 

Mods:

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


Other Instructions

Below are many other instructions that show you how to use your UpdateCase application