How to show and hide elements on button click using simple conditions?

P

Porebro2015-09-25 16:57:13

JavaScript

Porebro, 2015-09-25 16:57:13

There is such a code. It is necessary that on pressing the button - the hidden tag becomes visible and the text of the button changes to "Hide". When clicked again, the button text changes back to "Show" and the block becomes invisible again. I am a beginner and learning the basics, so I would like to see the code as primitive as possible, as well as adaptive.

<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;
}

Everything is great, but I would like to see the solution of this example using conditions, I do not have enough skills to write my thoughts in JS. But in general I think like this:
if(.hidden.display== 'none')
then the code is executed
if(.hidden.display== "block')
then the reverse code is executed
But I can't figure out how to write it down yet.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vitaly Inchin ☢, 2015-09-25
@Porebro

For example, like this.