Thanks Godsbest, what Im looking for is this. I tried a different thing. getting stuck where I have to replace text. when clicked on option. Here is what I have tried so far
HTML
<div class="mainDropDownWrapper">
<div class="clicker">Select Planets</div>
<div class="optionWrap">
<div class="Opt0">Jupiter</div>
<div class="Opt1">Neptune</div>
<div class="Opt2">Venus</div>
<div class="Opt3">Earth</div>
<div class="Opt4">Other</div>
</div>
</div>
JQUERY
<script type="text/javascript">
<!--
$(document).ready(function() {
$('.optionWrap').hide();
$('.clicker, .Opt0, .Opt1, .Opt2, .Opt3, .Opt4').click(function(){
$('.optionWrap').slideToggle(function(){
$('.Opt0').click(function () {
var linkText = $(this).text();
$('.clicker').html(linkText);
});
$('.Opt1').click(function () {
var linkText = $(this).text();
$('.clicker').html(linkText);
});
.
.
.
.//Opt2 and so on....
});
});
WHEN CLICKED ON OPTION 'OTHER' in the dropdown it should open a textarea to fill in
JQUERY
$(function() {
$('.optionTextArea textarea').hide();
$('#type').change(function(){
if($('#type').val() == 'Other') {
$('.optionTextArea textarea').show("slow");
} else {
$('.optionTextArea textarea').hide();
}
});
});
});
Thanks.....