Есть вот такой код. Нужно чтобы по нажатию по кнопке - скрытый тег становился видимым и текст кнопки менялся на "Скрыть" . При повторном клике, текст кнопки меняется обратно на "Показать" и блок опять становится невидимым. Я новичок и учусь основам, поэтому и код хотелось бы увидеть как можно более примитивным, а так же адаптивным.
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="main.css"/>
<script src="jquery.js"></script>
<script>
$(function(){
$('#spoiler').click(function(){
$('.hidden').slideDown();
$('#spoiler').text('Скрыть');
});
});
</script>
</head>
<body>
<div >
Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.
</div>
<div class="hidden"> Нажав на кнопку «Написать реферат», вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам.
Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст Яндекс.Рефератов неповторим.
Текстами рефератов можно пользоваться совершенно бесплатно, однако при транслировании и предоставлении текстов в массовое пользование ссылка на Яндекс.Рефераты обязательна.
</div>
<button id="spoiler">Показать</button>
</body>
</html>
*{
box-sizing: border-box;
}
.hidden{
display: none;
}
Все здорово , но хотелось бы посмотреть решение данного примера с помощью условий , мне не хватает навыков чтобы записать мои мысли на JS . А в общем думаю так:
if(.hidden.display== 'none')
то выполняется код
if(.hidden.display== "block')
то выполняется обратный код
Но как это записать я ума не приложу пока.
