Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 A simple show/hide with jQuery
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #1
A simple show/hide with jQuery
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 Smile ). 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 ?



[Image: leelink.gif]
MYBB1.6 & XThreads
(This post was last modified: 08-02-2015 07:41 PM by leefish.)
08-01-2015 07:11 PM
Visit this user's website Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: