Как скрыть блоки с одинаковыми классами кроме того кторый не нужно скрывать?
 

Здравствуйте друзья, столкнулся с задачкой для решения которой у меня не хватает опыта.
Имеется сайт с системой тестирования, все тесты отображаются в личном кабинете пользователя в виде списка, когда пользователь выбирает тест для прохождения он нажимает кнопку «Начать тестирование» после чего открывается тест и собственно начинается сам процесс тестирования. Но все тесты которые находятся в данном списке остаются, то есть не скрываются. Как заставить с помощью JS скрыть все тесты кроме того который проходит пользователь?
Для начала прохождения теста пользователь нажимает кнопку с таким содержимым:
<input class="wpProQuiz_button" type="button" value="Начать тест" name="startQuiz">
Может как-то прикрутить onclick к кнопке “ Начать тест ” ?
HTML содержимое страницы:
<div class="activtest"></div>
<div class="activtest"> Данный тест был открыт </div>
<div class="activtest"></div>
<div class="activtest"></div>
<div class="activtest"></div>

Буду благодарен за любой ответ, спасибо друзья.

Я не много продвинулся, как по клику дочернего элемента с class="wpProQuiz_button" скрыть при помощи JS все дивы которые находятся в id=rcl-tabs, кроме родителя (class="wpProQuiz_button") у которого class="activtest"?

Зачем хранить все тесты на странице? :blink:
Подгружай только один, какой нужен. Остальные так путь и лежат на сервере...

Дело в том что тестирование должно происходить в ЛК пользователя, и как следствие (нет возможности скрыть сайдбар панели ЛК) открытие теста так же должны быть в ЛК.
Уважаемый Ksa ksa, на данный момент вкурив не одну статью по JS картина происходящего (лично для меня) в корне изменилась как и требования к JS скрипту.
Чего необходимо добиться:
При не активном тесте, то есть отображается только список тестов имеются DIVы с классом activtest, при нажатии пользователем кнопки с классом wpProQuiz скрипту необходимо сделать следующее:
1)Найти ID прародительского DIVа того элемента по которому был произведен щелчок (в данном случае id=wpProQuiz_6).
2) Занести ID в переменную
3) Скрыть все DIVы с классом activtest ID которых не совпадает с ранее (пункт 2) найденным DIVом.

Неудачный подход... :no:
И сам алгоритм в частности.

Все тесты нужно отделить от страницы в целом....
Сначала показать список тестов. После выбора теста - подгрузить именно его.
Пусть начинают проходить.

И так поступать при любом выборе теста.

Dydaevskiy, ты серверный язык вообще никакой не используешь?

Использую, но на этих тестах застрял.

Подскажите пожалуйста хотя бы какойнибудь вариант касаемо описанного мной в данном сообщении http://javascript.ru/forum/showthrea...756#post435777

Делай тестовый пример - покажу на нем. :yes:

Допустим есть такой вариант:
Ставим на кнопку onClick="show();"

show.visible = 'done';
show.hidden = 'available';
 function show(){
 	show.hidden = show.visible;
 	show.visible = (show.visible === 'done')?'available':'done';
	document.getElementById(show.visible).style.display = 'block';
	document.getElementById(show.hidden).style.display = 'none';
}

Скрипт очень даже работает, ему только нужно указать ID прородителя.

Отправил в личку, спасибо Вам огромное. :)

Ты тут пример выкладывай... :)
Вместо картинки
http://javascript.ru/forum/435777-post4.html
Сделай аналогичный ХТМЛ минимально, дабы была понятна суть вопроса.

Понял, делаю.

HTML код страницы:
https://jsfiddle.net/dydaevskiy/cxxavjp9/?utm_source=website&utm_medium=embed&utm_campaign= cxxavjp9

Dydaevskiy, вот как делают тестовые примеры
http://javascript.ru/forum/events/66...tml#post435648

Понял, переделываю. Спасибо за Ваше терпение.

HTML код переделка:

<div id="rcl-tabs">     
<div id="available">
<header class="my_entry-header">
<!-- ТЕСТ 1 -->
            <div class="activtest"><h3 class="wpProQuiz_button aligncenter"><b>А вы пунктуальный человек?  </b></h3>
				<div class="wpProQuiz_content" id="wpProQuiz_1">
				<!-- Содержимое теста -->
				</div> 
			</div>
<!-- ТЕСТ 2 -->
            <div class="activtest"><h3 class="wpProQuiz_button aligncenter"><b>Мой тест </b></h3>
				<div class="wpProQuiz_content" id="wpProQuiz_2">
				<!-- Содержимое теста -->
				</div> 
			</div>
<!-- ТЕСТ 3 -->			
			<!-- СОДЕРЖИМОЕ БЛОКА ПОЛНОСТЬЮ -->
			<div class="activtest"><h3 class="wpProQuiz_button aligncenter"><b>Мой тест </b></h3>        <div class="wpProQuiz_content" id="wpProQuiz_2">
                    <div style="display: none;" class="wpProQuiz_time_limit">
						<div class="time">Лимит времени: <span>0</span></div>
						<div class="wpProQuiz_progress"></div>
					</div>
                <div class="wpProQuiz_checkPage" style="display: none;">
					<h4 class="wpProQuiz_header">Навигация (только номера заданий)</h4>

            <p><span>0</span> из 1 заданий окончено</p>
			<p>Вопросы:</p>
            <div style="margin-bottom: 20px;" class="wpProQuiz_box">
                <ol>
                 <li>1</li>
                </ol>
                <div style="clear: both;"></div>
            </div>
				<input type="button" name="endQuizSummary" value="Завершить тест" class="wpProQuiz_button">
				</div>
					<div class="wpProQuiz_infopage" style="display: none;">
						<h4>Информация</h4>
						<input type="button" name="endInfopage" value="Завершить тест" class="wpProQuiz_button">
					</div>
                <div class="wpProQuiz_text">
					<p>Новый тест</p>
						<div>
							<!-- onClick="show();" --> 
<!-- На данную кнопку необходимо повесить обработчик --><input onclick="show();" class="wpProQuiz_button" type="button" value="Начать тест" name="startQuiz">
    <div>
	<!-- Другое содержимое теста -->
    </div>
            </div>
              
			</div>
            

<!-- Содержимое данного блока (id="done") тоже необходимо скрыть -->
<div id="done">
</div>
<div id="lk-content" class="rcl-content"><div id="tab-agroportal_test_system" class="agroportal_test_system_block recall_content_block active"><div id="subtab-agroportal_test_system" class="rcl-subtab-content">1</div></div></div>    
</div>

Жуть какая-то. :blink:
Это ты сам такое написал или генерит какая-то программка?

Что с эти нужно делать?

У этого тега в примере нет закрытия...

Неужели так трудно сделать примерчик для дальнейшей с ним работы?

Я максимально сократил код, так как оригинал более 2000 символов.
При клике по кнопке (строка 44) необходимо загнать ID родителя (строка 18) с классом wpProQuiz_content в переменную, и скрыть блоки с классом activtest (у родителя такой же класс, ID нужен для того что б как раз родитель и не скрылся), вместе с с классом activtest скрылся блок с ID done (строка 54).

ID родителя - id="wpProQuiz_2"

Прошу прощение, все мое внимание было предоставлено DIVam а их в исходнике было очень много.

Тестовый пример это не "огрызок" от некоего исходника... :no:
Тестовый пример это упрощенный, полностью законченный документ.

Кса, я уже не знаю как Вам преподнести код, да и зачем отображать все внутренности блоков если ID родителя только один. Следовательно необходим элемент к которому нужно прикрутить (INPUT) скрипт и его родитель отображение которого необходимо продолжить в то время как все остальные элементы будут скрыты. В последнем "огрызке" я выложил все самое нужное, прошу тыкните носом как его обработать с JS. Дальше я сам как-то раскурю.

КОД:

<div id="rcl-tabs">
    <div id="available">
            <!-- ТЕСТ 1 -->
            <div class="activtest"><h3 class="wpProQuiz_button aligncenter"><b>А вы пунктуальный человек?  </b></h3>
                <div class="wpProQuiz_content" id="wpProQuiz_1">
                    <!-- Содержимое теста -->
                </div>
            </div>
            <!-- ТЕСТ 2 -->
            <div class="activtest"><h3 class="wpProQuiz_button aligncenter"><b>Мой тест </b></h3>
                <div class="wpProQuiz_content" id="wpProQuiz_2">
                    <!-- Содержимое теста -->
                </div>
            </div>
            <!-- ТЕСТ 3 -->
            <!-- СОДЕРЖИМОЕ БЛОКА ПОЛНОСТЬЮ -->
            <div class="activtest"><h3 class="wpProQuiz_button aligncenter"><b>Мой тест </b></h3>        <div class="wpProQuiz_content" id="wpProQuiz_2">
                <div style="display: none;" class="wpProQuiz_time_limit">
                    <div class="time">Лимит времени: <span>0</span></div>
                    <div class="wpProQuiz_progress"></div>
                </div>
                <div class="wpProQuiz_checkPage" style="display: none;">
                    <h4 class="wpProQuiz_header">Навигация (только номера заданий)</h4>

                    <p><span>0</span> из 1 заданий окончено</p>
                    <p>Вопросы:</p>
                    <div style="margin-bottom: 20px;" class="wpProQuiz_box">
                        <ol>
                            <li>1</li>
                        </ol>
                        <div style="clear: both;"></div>
                    </div>
                    <input type="button" name="endQuizSummary" value="Завершить тест" class="wpProQuiz_button">
                </div>
                <div class="wpProQuiz_infopage" style="display: none;">
                    <h4>Информация</h4>
                    <input type="button" name="endInfopage" value="Завершить тест" class="wpProQuiz_button">
                </div>
                <div class="wpProQuiz_text">
                    <p>Новый тест</p>
                    <div>
                        <!-- onClick="show();" -->
                        <!-- На данную кнопку необходимо повесить обработчик --><input onclick="show();" class="wpProQuiz_button" type="button" value="Начать тест" name="startQuiz">
                        <div>
                            <!-- Другое содержимое теста -->
                        </div>
                    </div>

                </div>


                <!-- Содержимое данного блока (id="done") тоже необходимо скрыть -->
                <div id="done">
                </div>
                <div id="lk-content" class="rcl-content"><div id="tab-agroportal_test_system" class="agroportal_test_system_block recall_content_block active"><div id="subtab-agroportal_test_system" class="rcl-subtab-content">1</div></div></div>
            </div>
    </div>
</div>

Какие действия с ним нужно делать? И, что в итоге получить хочешь?
Мы можем все прекратить прямо сейчас. :D Если оно не нужно тебе - мне оно точно не нужно... :no:

Чего необходимо добиться:
При не активном тесте, то есть отображается только список тестов имеются DIVы с классом activtest, при нажатии пользователем кнопки с классом wpProQuiz скрипту необходимо сделать следующее:
1)Найти ID прародительского DIVа того элемента по которому был произведен щелчок (в данном случае id=wpProQuiz_6).
2) Занести ID в переменную
3) Скрыть все DIVы с классом activtest ID которых не совпадает с ранее (пункт 2) найденным DIVом.

В твоем "примере" нет такого элемента... :no:

Dydaevskiy, кто тебе рисует такой фиговый ХТМЛ?