Бутони, които показват и скриват текст

<!DOCTYPE html>
<html>
<body><form style="padding-left:5px">
<input type="radio" name="RadioGroupName" id="GroupName1" onclick="ShowRadioButtonDiv('GroupName', 3)">Избор 1<br>
<input type="radio" name="RadioGroupName" id="GroupName2" onclick="ShowRadioButtonDiv('GroupName', 3)">Избор 2<br>
<input type="radio" name="RadioGroupName" id="GroupName3" onclick="ShowRadioButtonDiv('GroupName', 3)">Избор 3<br>
</form>

<script>
function ShowRadioButtonDiv (IdBaseName, NumberOfButtons) {
    for (x=1;x<=NumberOfButtons;x++) {
        CheckThisButton = IdBaseName + x;
        ThisDiv = IdBaseName + x +'Div';
    if (document.getElementById(CheckThisButton).checked) {
        document.getElementById(ThisDiv).style.display = "block";
        }
    else {
        document.getElementById(ThisDiv).style.display = "none";
        }
    }
    return false;
}
</script>

<div id="GroupName1Div" style="display:none;">Тук се показва текстът от избор 1</div>
<div id="GroupName2Div" style="display:none;">Тук се показва текстът от избор 2</div>
<div id="GroupName3Div" style="display:none;">Тук се показва текстът от избор 3</div></body></html>

Резултат:
  • За да добавите нов избор, добавете: <input type="radio" name="RadioGroupName" id="GroupName1" onclick="ShowRadioButtonDiv('GroupName', 3)">Избор 1<br>
  • id="GroupName1 - Цифрите не бива да се повтарят затова, когато добавяте нов избор трябва да се със собствено число.
  • За да добавите текст на съответния избор, добавете: <div id="GroupName1Div" style="display:none;">Тук се показва текстът от избор 1</div>
  • id="GroupName1Div - Цифрата трябва да отговаря на id="GroupName1, от който при активирането му, ще показва текста.
  • "ShowRadioButtonDiv('GroupName', 3)" - Числото трябва да отговаря на броят на бутоните.

Използвайте го в Alle.bg с ниво на защита „Изолиране на кода от съдържанието на страница“.
В момента разглеждате олекотената мобилна версия на уебсайта. Към пълната версия.