title: Need help writing JS code for images that onclick display different elements on page
body: <p>I'm pretty new to JavaScript so I have some troubles trying to write this code.</p>
  <p>I want to have four images on my page that onclick show different articles (each article should be shown in the same place). So for example when I click pic no.1 it shows article no.1, then when I click pic no.3 it show article no.3 in the place of the previous article.</p>
  <p>The simplest way I know is to write different functions for each image/article, so this would be the code for the first image which shows the first article:</p>
  <pre><code>&lt;script&gt;
      function showArticle() {
      document.getElementById(&quot;firstArticle&quot;).style.display='block';}
  &lt;/script&gt;
  </code></pre>
  <p>All images would have the <em>onclick</em> event that 'calls' the function and displays the article</p>
  <pre><code>&lt;img onclick=&quot;showArticle()&quot; ... /&gt;
  </code></pre>
  <p>And each article would have a different <em>id</em> and <em>display</em> property set to <em>none</em></p>
  <pre><code>&lt;article style=&quot;display:none&quot; id=&quot;firstArticle&quot;&gt;
  </code></pre>
  <p>Also I should add a function that hides the article when another article is about to be shown but I'm not sure how to put it all together. So my question is: Do I have to write seperate functions for all images and articles or can I do it another way and have only one function which show (and hides) different articles depending on which image I click? If yes then how can I do it?</p>
  <p>Edit: This is html for the page (it has some element written in polish, it's not finished, and has external style sheets so I hope it doesn't make it harder to help me ;) )</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;pl&quot;&gt;
  &lt;head&gt;
       &lt;link rel=&quot;icon&quot; href=&quot;ikony/favicon.png&quot; type=&quot;image/ico&quot;&gt;
       &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; 
       &lt;link rel=&quot;stylesheet&quot; href=&quot;kartazezdjeciem.css&quot;&gt; 
       &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=PT+Serif|Roboto&quot;&gt;
       &lt;meta charset=&quot;UTF-8&quot;&gt;
       &lt;title&gt;Kakaowe love | Przepisy&lt;/title&gt;
       &lt;script&gt;
           function pokazPrzepis() {
           document.getElementById(&quot;przepisMuffiny&quot;).style.display='block';}
       &lt;/script&gt;   
       &lt;style&gt;
           body {
               background-image: url(&quot;zdjecia/kakao8.jpg&quot;);
               background-repeat: no-repeat;
               background-position: center top;
               background-attachment: fixed; 
               background-size: cover;}
               
           article {
               display: flex;
               justify-content: space-between;
               padding: 0 10%;}
           
           article:first-child {
               padding-bottom: 5%;}
                       
           .muffiny {
               background-image: url(&quot;zdjecia/muffiny.jpg&quot;);} 
           
           .czekoladadopicia {
               background-image: url(&quot;zdjecia/czekoladadopicia.jpg&quot;);}    
           
           .kakaodopicia {
               background-image: url(&quot;zdjecia/kakaodopicia.jpg&quot;);}    
          
           .kolumny {
               display: flex;
               flex-direction: row;
               justify-content: space-between;
               border-radius: 16px;
               background-color: rgb(0,0,0,0.6);
               box-shadow:  5px 5px 20px rgb(0,0,0,0.6);
               padding: 1.5% 3%;}
               
           .kolumny ul {
               list-style-type: none;}
  
           .kolumny ul, ol {
               text-align: left;
               padding: 0;
               margin: 0;}
               
           .kolumny ul li {
               margin: 10px 0;}
           
           .kolumny ol li {
               margin: 20px 0;}   
       &lt;/style&gt;
  &lt;/head&gt;  
  &lt;body&gt;
       &lt;header&gt;   
           &lt;nav&gt; 
               &lt;ul&gt;
                   &lt;li&gt;&lt;a href=&quot;witamy.html&quot;&gt;WITAMY&lt;/a&gt;&lt;/li&gt;                   
                   &lt;li&gt;&lt;a class=&quot;aktywna&quot; href=&quot;przepisy.html&quot;&gt;PRZEPISY&lt;/a&gt;&lt;/li&gt;               
                   &lt;li&gt;&lt;a href=&quot;kontakt.html&quot;&gt;KONTAKT&lt;/a&gt;&lt;/li&gt;  
                   &lt;img src=&quot;zdjecia/logo2.png&quot;/&gt;              
                   &lt;li&gt;&lt;a href=&quot;sklep.html&quot;&gt;SKLEP&lt;/a&gt;&lt;/li&gt;
                   &lt;li class=&quot;listarozwijana&quot;&gt;
                       &lt;a href=&quot;javascript:void(0)&quot; class=&quot;polelisty&quot;&gt;O KAKAO&lt;/a&gt;
                       &lt;div class=&quot;zawartosclisty&quot;&gt;
                           &lt;a href=&quot;historiakakao.html&quot;&gt;HISTORIA&lt;/a&gt;
                           &lt;a href=&quot;produkcjakakao.html&quot;&gt;PRODUKCJA&lt;/a&gt;
                       &lt;/div&gt;
                   &lt;/li&gt;
                   &lt;li class=&quot;listarozwijana&quot;&gt;
                       &lt;a href=&quot;javascript:void(0)&quot; class=&quot;polelisty&quot;&gt;O CZEKOLADZIE&lt;/a&gt;
                       &lt;div class=&quot;zawartosclisty&quot;&gt;
                           &lt;a href=&quot;historiaczekolady.html&quot;&gt;HISTORIA&lt;/a&gt;
                           &lt;a href=&quot;produkcjaczekolady.html&quot;&gt;PRODUKCJA&lt;/a&gt;
                       &lt;/div&gt;
                   &lt;/li&gt;               
               &lt;/ul&gt; 
           &lt;/nav&gt; 
       &lt;/header&gt;
       &lt;main&gt;
           &lt;article&gt;
               &lt;div class=&quot;kartazezdjeciem&quot; onclick=&quot;pokazPrzepis()&quot;&gt;      
                       &lt;div class=&quot;zdjeciekarty kakaodopicia&quot;&gt;&lt;/div&gt;               
                   &lt;div class=&quot;opiskarty&quot;&gt;
                       &lt;h4&gt;Kakao do picia&lt;/h4&gt;
                       &lt;p&gt;..&lt;/p&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class=&quot;kartazezdjeciem&quot; onclick=&quot;pokazPrzepis()&quot;&gt;
                       &lt;div class=&quot;zdjeciekarty czekoladadopicia&quot;&gt;&lt;/div&gt;
                   &lt;div class=&quot;opiskarty&quot;&gt;
                       &lt;h4&gt;Czekolada do picia&lt;/h4&gt;
                       &lt;p&gt;...&lt;/p&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class=&quot;kartazezdjeciem&quot; onclick=&quot;pokazPrzepis()&quot;&gt;
                       &lt;div class=&quot;zdjeciekarty muffiny&quot;&gt;&lt;/div&gt;
                   &lt;div class=&quot;opiskarty&quot;&gt;
                       &lt;h4&gt;Muffiny czekoladowe&lt;/h4&gt;
                       &lt;p&gt;...&lt;/p&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class=&quot;kartazezdjeciem&quot; onclick=&quot;pokazPrzepis()&quot;&gt;
                       &lt;div class=&quot;zdjeciekarty&quot;&gt;&lt;/div&gt;                
                   &lt;div class=&quot;opiskarty&quot;&gt;
                       &lt;h4&gt;Ciasto&lt;/h4&gt;
                       &lt;p&gt;...&lt;/p&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
           &lt;/article&gt;  
           &lt;article style=&quot;display:none&quot; id=&quot;przepisKako&quot;&gt;
               &lt;div class=&quot;kolumny&quot;&gt;
                   &lt;div style=&quot;width:25%&quot;&gt;
                       &lt;h3&gt;Składniki:&lt;/h3&gt;
                       &lt;ul&gt;
                           &lt;li&gt;400 ml mleka&lt;/li&gt;
                           &lt;li&gt;2 łyżki miodu&lt;/li&gt;
                           &lt;li&gt;3 łyżki cukru&lt;/li&gt;
                           &lt;li&gt;4 łyżki gorzkiego kakao&lt;/li&gt;
                           &lt;li&gt;6kostek czekolady (gorzkiej lub mlecznej) &lt;/li&gt;
                           &lt;/ul&gt;
                   &lt;/div&gt;
                   &lt;div style=&quot;width:72%&quot;&gt;
                       &lt;h3&gt;Przygotowanie:&lt;/h3&gt;
                       &lt;ol&gt;
                           &lt;li&gt;Mleko zagrzej z cukrem, odlej odrobinę do szklanki.&lt;/li&gt;
                           &lt;li&gt;Wymieszaj przelane mleko z kakao i dodaj z powrotem do garnka. Zagotuj, cały czas mieszając.&lt;/li&gt;
                           &lt;li&gt;Napój przelej do kubków, dodaj miód i startą na tarce czekoladę!&lt;/li&gt;
                       &lt;/ol&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
           &lt;/article&gt;
           &lt;article style=&quot;display:none&quot; id=&quot;przepisMuffiny&quot;&gt;
               &lt;div class=&quot;kolumny&quot;&gt;
                   &lt;div style=&quot;width:25%&quot;&gt;
                       &lt;h3&gt;Składniki:&lt;/h3&gt;
                       &lt;ul&gt;
                           &lt;li&gt;150 g masła&lt;/li&gt;
                           &lt;li&gt;150 g czekolady (dowolnej)&lt;/li&gt;
                           &lt;li&gt;300 g mąki&lt;/li&gt;
                           &lt;li&gt;2 łyżeczki proszku do pieczenia&lt;/li&gt;
                           &lt;li&gt;1/2 łyżeczki sody oczyszczonej&lt;/li&gt;
                           &lt;li&gt;2 łyżki kakao&lt;/li&gt;
                           &lt;li&gt;1 łyżka kawy zbożowej lub kakao&lt;/li&gt;
                           &lt;li&gt;1 szklanka (190 g) cukru&lt;/li&gt;
                           &lt;li&gt;1 łyżka cukru wanilinowego lub 2 łyżeczki ekstraktu z wanilii&lt;/li&gt;
                           &lt;li&gt;2 duże jajka&lt;/li&gt;
                           &lt;li&gt;170 ml mleka&lt;/li&gt;
                       &lt;/ul&gt;
                   &lt;/div&gt;
                   &lt;div style=&quot;width:72%&quot;&gt;
                       &lt;h3&gt;Przygotowanie:&lt;/h3&gt;
                       &lt;ol&gt;
                           &lt;li&gt;Piekarnik nagrzać do 180 stopni C. Masło roztopić i ostudzić. Czekoladę pokroić na kawałeczki.&lt;/li&gt;
                           &lt;li&gt;Mąkę przesiać do miski razem z proszkiem do pieczenia, sodą, kakao, kawą zbożową. Jeszcze raz przesiać w celu dokładnego wymieszania składników. Dodać cukier, cukier wanilinowy, wymieszać, odstawić.&lt;/li&gt;
                           &lt;li&gt;Jajka rozmiksować w drugiej misce razem z mlekiem i ekstraktem z wanilii (jeśli nie używaliśmy cukru wanilinowego).&lt;/li&gt;
                           &lt;li&gt;Teraz wszystkie składniki delikatnie łączymy za pomocą łyżki: do sypkich, przesianych składników dodajemy masę jajeczną i kilkakrotnie delikatnie mieszamy łyżką, dodajemy roztopione masło a za chwilę posiekaną czekoladę. Mieszamy krótko (3 - 4 ruchy łyżką), ciasto ma być lekko grudkowate, ale surowa mąka nie powinna być widoczna.&lt;/li&gt;
                           &lt;li&gt;Masę wyłożyć do papilotek umieszczonych w formie na muffiny i wstawić do piekarnika. Piec przez około 25 minut, do czasu aż muffiny urosną, na wierzchu utworzy się skorupka a wetknięty patyczek będzie suchy.&lt;/li&gt;
                       &lt;/ol&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
           &lt;/article&gt;
           &lt;article style=&quot;display:none&quot; id=&quot;przepisCzekolada&quot;&gt;
           &lt;/article&gt;
           &lt;article style=&quot;display:none&quot; id=&quot;przepisCiasto&quot;&gt;
           &lt;/article&gt;
       &lt;/main&gt;     
       &lt;footer&gt;
           &lt;div class=&quot;kolumnystopka&quot;&gt;
               &lt;div&gt;
                   Autor: Julia Wróblewska wrgreg&lt;br&gt;awefwfeef
               &lt;/div&gt;
               &lt;div&gt;
               Font generated by &lt;a href=&quot;https://www.flaticon.com&quot;&gt; flaticon.com&lt;/a&gt;.&lt;br&gt;
               Under &lt;a href=&quot;http://creativecommons.org/licenses/by/3.0/&quot;&gt;CC&lt;/a&gt;: 
               &lt;a data-file=&quot;015-cocoa-6&quot; href=&quot;http://www.freepik.com&quot;&gt;Freepik&lt;/a&gt;, 
               &lt;a data-file=&quot;004-cocoa-2&quot; href=&quot;https://www.flaticon.com/authors/vitaly-gorbachev&quot;&gt;Vitaly Gorbachev&lt;/a&gt;, 
               &lt;a data-file=&quot;008-chocolate&quot; href=&quot;https://www.flaticon.com/authors/ddara&quot;&gt;dDara&lt;/a&gt; 
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/footer&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>