Показать / скрыть проблему - PullRequest
Новая
       12

Показать / скрыть проблему

0 голосов
/ 02 апреля 2012 
    <script>
    function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
    }
    </script>

    <style>
    .hidden { display: none; }
    .unhidden { display: block; }
    </style>

    <div class="answers">
        <ol>
            <li>
                <input type="radio" name="q1" id="q1-a" onclick="unhide('answerq1a')"/>John
            </li>
            <li>
                <input type="radio" name="q1" id="q1-b" onclick="unhide('answerq1b')"/>Paula
            </li>
            <li>
                <input type="radio" name="q1" id="q1-c" onclick="unhide('answerq1c')"/>Henal
            </li>
            <li>
                <input type="radio" name="q1" id="q1-d" onclick="unhide('answerq1d')"/>Malc
            </li>
        </ol>
    </div>

    <div id="answerq1a" class="hidden">
    <textarea class="widthninetyfivepercent" rows="4" name="optionA" id="1-A" maxlength="300" value=""/>Your answer is correct, John is 20.</textarea>
    </div>

Это работает нормально, но единственная проблема в том, что я использую переключатели и хочу щелкнуть мышью, чтобы показать свой div (что он делает), но когда нажата другая переключающая кнопка, я хочу, чтобы она скрыла все остальные скрытые div. и показывать только по одному за раз.

Как я могу сделать это самым простым способом?

Вы можете обнаружить, что некоторые вещи написаны странным образом, но это потому, что мне нужно, чтобы это было отредактировано с помощью CMS, и оно будет подбираться только определенным образом. Именно поэтому я использую это конкретное шоу / скрыть. Он короткий и работает так, как я написал.

С уважением,

Джон Вас.

1 Ответ

1 голос
/ 02 апреля 2012

Без существенного изменения html или кода DEMO 

<input type="radio" name="q1" id="q1-a" onclick="unhide(this)" />
<input type="radio" name="q1" id="q1-b" onclick="unhide(this)" />
<input type="radio" name="q1" id="q1-c" onclick="unhide(this)" />
<input type="radio" name="q1" id="q1-d" onclick="unhide(this)" />

с использованием 

var currentShown = "";
function unhide(rad) {
  var id = "answer"+rad.id.replace("-",""); 
  var answer = document.getElementById(id);
  if (answer) {
    var current = document.getElementById(currentShown);
    if (current) current.className="hidden";
    currentShown=id;
    answer.className="unhidden";
  }
}
...