JavaScript onclick change style from display none to display block
<p>I have a situation that I'm trying to do, and I need your help because I do not have much experience with JavaScript. </p>

<p>First please take a look at this code where I was through ajax, parse from xml file into html. I set the picture as background of #clickMapFlashContainer, and prepend hotspots clickable circles into #clickAreas which results to get 5 clickable circles, which look like this: (screenshot) <a href="http://prntscr.com/d3v97y" rel="nofollow noreferrer">http://prntscr.com/d3v97y</a> (Currently when we get to the site, site looks like this)</p>

<p>You'll notice that I have 5 different clickable circles with _clickable id and class circle.  Each circle with _clickable id have onclick="onclick(id)" and this function should be executed onclick. </p>

<p>Below I have divs with same id but without _clickable and all of 5 have display: none... Display none needs to be changed to display block when click on corresponding id with _clickable circle.</p>

<p>However, there is one thing I must mention, in a situation when the div with class clickMapItem text is display block, background image from #clickMapFlashContainer should be visible as it is, it is only necessary to change the text below the image, <strong>but</strong> in situation when the div with class clickMapItem multiImageText is display block, background image from #clickMapFlashContainer <strong>should be display none</strong> because clickMapItem multiImageText contains a gallery and background should not be seen. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="clickMap"&gt;

&lt;div id="clickMapFlashContainer" style="background-image: url(../../../../../../linkableblob/internet_en/9492/image/steel_agg_bof_flash_en-image.jpg;); width: 560px; height: 560px; background-repeat: no-repeat;"&gt;

&lt;div id="clickAreas"&gt;
  &lt;div id="clickMap_item_11024_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 11px; left: 219px; width: 76px; height: 76px; opacity: 0.5; border-radius: 100%; cursor: pointer;"&gt;&lt;/div&gt;
  
  &lt;div id="clickMap_item_11006_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 388px; left: 
 250px; width: 66px; height: 66px; opacity: 0.5; border-radius: 100%; cursor: pointer;"&gt;&lt;/div&gt;
  
  &lt;div id="clickMap_item_11004_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 155px; left: 
 189px; width: 135px; height: 135px; opacity: 0.5; border-radius: 100%; cursor: pointer;"&gt;&lt;/div&gt;
  
  &lt;div id="clickMap_item_10450_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 208px; left: 
 436px; width: 105px; height: 105px; opacity: 0.5; border-radius: 100%; cursor: pointer;"&gt;&lt;/div&gt;
  
  &lt;div id="clickMap_item_9510_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 469px; left: 
 350px; width: 75px; height: 75px; opacity: 0.5; border-radius: 100%; cursor: pointer;"&gt;
  &lt;/div&gt;
  
&lt;div id="clickMap_item_default" class="clickMapItem text"&gt;
     &lt;p&gt;Due to long-standing contact with customers RHI has detailed knowledge of the requirements that steelworkers place on refractories. This is why RHI has been involved in the development of package and system solutions for many years und nowadays offers customized high-end solutions for basically all individual customer requirements.&lt;/p&gt;
    &lt;/div&gt;  
  
&lt;/div&gt;
&lt;!-- clickMap text --&gt;
      &lt;div id="clickMap_item_9510" class="clickMapItem text" style="display: none;"&gt;
        &lt;a href="#" class="close" onclick="backClose();" return false;"&gt;back&lt;/a&gt;
        &lt;p&gt;text&lt;/p&gt;
    &lt;/div&gt;                                                                       
&lt;!-- clickMap gallery --&gt;
      &lt;div id="clickMap_item_10450" class="clickMapItem multiImageText" style="display: none;"&gt;
          &lt;a href="#" class="close" onclick="backClose();" return false;"&gt;back&lt;/a&gt;
        &lt;p&gt;text&lt;/p&gt;
    &lt;/div&gt;                                                                                       
 &lt;!-- clickMap text --&gt;
      &lt;div id="clickMap_item_11004" class="clickMapItem text" style="display: none;"&gt;        
        &lt;a href="#" class="close" onclick="backClose();" return false;"&gt;back&lt;/a&gt;
        &lt;p&gt;text&lt;/p&gt;
    &lt;/div&gt;   
&lt;!-- clickMap gallery --&gt;
      &lt;div id="clickMap_item_11006" class="clickMapItem multiImageText" style="display: none;"&gt;
         &lt;a href="#" class="close" onclick="backClose();" return false;"&gt;back&lt;/a&gt;
        &lt;p&gt;text&lt;/p&gt;
    &lt;/div&gt;                                                                                        
&lt;!-- clickMap text --&gt;
      &lt;div id="clickMap_item_11024" class="clickMapItem text" style="display: none;"&gt;
          &lt;a href="#" class="close" onclick="backClose();" return false;"&gt;back&lt;/a&gt;
        &lt;p&gt;text&lt;/p&gt;
    &lt;/div&gt; 
        
          &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<pre><code>&lt;script type="text/javascript"&gt;
    jQuery(function ($) {
    $.ajax({
        type: "GET",
        url: 'steel_agg_bof_flash_en.xml',
        dataType: "xml",
        success: xmlParser
      });
      function xmlParser(xml) {

          $(xml).find("basics").each(function () {

            var img = $(this).find('imgpath').text();

              $('#clickMapFlashContainer').css({
                'background-image' : 'url(' + img + ')',
                'width'  : '560px',
                'height' : '560px',
                'background-repeat' : 'no-repeat',
              });       
          });
          $(xml).find("hotspot").each(function () {
            var position   =  $(this).find('position').text();
            var arr        =  position.split(",");
            var hotspotid  =  $(this).find('hsid').text();

            $('#clickAreas').prepend('&lt;div id="'+ hotspotid +'_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: ' + arr[1] + 'px' + '; left: ' + arr[0] + 'px' +'; width: ' + Math.floor(arr[2]/3.28148) + 'px; height: '+ Math.floor(arr[2]/3.28148) + 'px; opacity: 0.5; border-radius: 100%; cursor: pointer;"&gt;&lt;/div&gt;');
          });

        }

    });

&lt;/script&gt;
</code></pre>

<p>I found a solution and working properly, but this is JavaScript newbie code as you can see, please take a look and suggest what can be changed, because I think it is a messy code. Whether it is a good idea to use Array.prototype.slice.call to convert NodeList to an Array and then check whether the div contains one of these classes? </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function changeStyle(hotspotid) {
  var hotspot = hotspotid.replace('_clickable', '');
  var hotspots = document.querySelectorAll(".clickMapItem.text, .clickMapItem.multiImageText"); // Return a NodeList

  var nodesArray = Array.prototype.slice.call(hotspots, 0); //Convert NodeList to an Array
  nodesArray.forEach(function(item) {
    console.log(item);
  });
  var i;
  for (i = 0; i &lt; hotspots.length; i++) {
    hotspots[i].style.display = "none";
  }

  if (hotspotid == "clickMap_item_10450_clickable" || hotspotid == "clickMap_item_11006_clickable") {
    document.getElementById('clickMapFlashContainer').style.display = "none";
  }


  if (hotspots[0].style.display == "") {
    document.getElementById(hotspot).style.display = '';
    document.getElementById("clickMap_item_default").style.display = "none";
  } else if (hotspots[1].style.display == "") {
    document.getElementById("clickMapFlashContainer").style.display = "none";
  }
};

function backClose() {

  var sections = document.getElementsByClassName("clickMapItem");
  var i;
  for (i = 0; i &lt; sections.length; i++) {
    sections[i].style.display = "none";
  }

  document.getElementById('clickMapFlashContainer').style.display = "";
  document.getElementById("clickMap_item_default").style.display = "";

  }
}</code></pre>
</div>
</div>
</p>