A simple show/hide with jQuery

[leefish]

This is something I did a long time ago with PrototypeJS; its a bit clunky, and its just a show hide, so a view-source or inspect-element will show all the stuff, but its nice for candy.

Situation:  You have a select box and you want that on newthread when option 1 is selected a certain text shows, on option2, another text shows.

Solution: You need to set up your custom field correctly and add a script to your new thread.

---

Custom field settings

Title : Give it a title

---

Key: Give it a key (keep it simple, it just makes the typing shorter in the script bits ). For this example I will call it contus_select

---

Input Field Type : listbox

---

Input Formatter

Code:

{VALUE}

---

---

Values List:

Code:

0{|} 1{|}Option 1 2{|}Option 2

---

Using the numbers like that makes it a lot easier to access the value in your js and its good to do it that way anyway for other reasons.

---

Input Field HTML :

Code:

<select style="{WIDTH_CSS}" id="xtrrr_{KEY}"{NAME_PROP}{MULTIPLE_PROP}{HEIGHT_PROP_SIZE}{TABINDEX_PROP}> <![ITEM[<option value="{VALUE}"{STYLE}{SELECTED}>{LABEL}</option>]]> </select>

---

Save the custom thread field.

---

In your newthread template
Add the HTML for the two areas you want to have show on the select change.

Code:

<div id="opt1" style="display:none;">You chose option one</div> <div id="opt2" style="display:none;">You chose option two</div>

---

at the bottom of the template, right before the </body> tag

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<script> $(document).ready(function() { var typeSelector = $('#xtrrr_contus_select'); var areaOne = $('#opt1'); var areaTwo = $('#opt2'); typeSelector.change(function(){ if (typeSelector.val() === '1') { areaOne.show(); areaTwo.hide(); } if (typeSelector.val() === '2') { areaOne.hide(); areaTwo.show(); } }); }); </script>

---

Ta-da ?