I have a DIV that contains a list of radio buttons and a 'selected search' area (a <span>). When the 'selected search' area is clicked, a drop-down layer appears with the DIV containing the radio buttons. Upon selecting a radio button, the text in the 'selected search' area updates to display the selected option, and the drop-down layer collapses.
Below is the HTML structure:
<div class="radio-btns"><span class="selected-search">A</span>
<div class="radio-btns-wrapper">
<label><input type="radio" value="a" id="a" checked>A</label>
<label><input type="radio" value="b" id="b">B</label>
<label><input type="radio" value="c" id="c">C</label>
<label><input type="radio" value="d" id="d">D</label>
</div>
</div>
If you have any suggestions on how to achieve this using jQuery, your assistance would be greatly appreciated.
Thank you.
** UPDATE **
Since I initially posted this question in 2010, my jQuery skills have improved. Here's an updated markup since the previous one could be better optimized.
New HTML structure:
<a href="#" class="selected-search">A</a>
<div class="radio-btns-wrapper">
<label><input type="radio" value="a" id="a" name="radio" checked>A</label>
<label><input type="radio" value="b" id="b" name="radio">B</label>
<label><input type="radio" value="c" id="c" name="radio">C</label>
<label><input type="radio" value="d" id="d" name="radio">D</label>
</div>
jQuery script:
This is an improvement based on @Greg's solution below:
//If JavaScript is enabled, hide the container for radio buttons
$(".radio-btns-wrapper").hide();
//The DIV with radio buttons will slide down when .selected-search is clicked
//Default behavior of the link <a> is prevented to avoid page jumping back to top
$(".selected-search").click(function (e) {
$(".radio-btns-wrapper").slideDown();
e.preventDefault();
});
//Clicking on a radio button updates the target text with the selected option's text
$("input[type=radio]").click(function () {
// Update the text of the span to match the text of the clicked label
$(".selected-search").text($(this).parent().text());
// Hide the radio buttons
$(".radio-btns-wrapper").slideUp();
});
As the suggested demo link no longer works, I have created my own demo which can be viewed here: http://jsfiddle.net/rzea/vyvLvgkh/4/