title: Create a button to toggle flex-direction between row and column for a style
body: <p>I am tying to create a button that will toggle a style flex-direction between "row" and "column"</p>
  
  <p>The code I tried was based on some other code that I used for toggling the display between "flex" and "none".</p>
  
  <p>I can't use Id's because there a multiple non contiguous element.</p>
  
  <p><strong>I TRIED THE CODE BELOW</strong></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 setDisplay(className, displayValue) {
      var items = document.getElementsByClassName(className);
      for (var i=0; i &lt; items.length; i++) {
        items[i].style.flexDirection = displayValue;
      }
  }
  function showResponsive() {
      var elements = document.getElementsByClassName("main");
      Array.prototype.forEach.call(elements, function(el) {
        if (el.style.flex-direction === "column") {
            el.style.flex-direction = "row";
        } else {
            el.style.flex-direction = "column";
        }
      });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.green{
      background:green;
      width:300px;
      height:300px;
  }
  .red{
      background:red;
      width:300px;
      height:300px;
  }
  .black{
      background:black;
      width:300px;
      height:300px;
  }
  
  .main{
      display:flex;
      flex-direction:column
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;i&gt;Click switch&lt;/i&gt;&lt;/div&gt;
  &lt;div&gt;
    &lt;label class="switch"&gt;
        &lt;input type="checkbox" onclick="showResponsive()" &gt;
        &lt;span class="slider round"&gt;&lt;/span&gt;
    &lt;/label&gt;  
  &lt;/div&gt;             
                      
  &lt;div class="main"&gt; 
    &lt;div class="green"&gt;&lt;/div&gt;  
    &lt;div  class="red"&gt;&lt;/div&gt;  
    &lt;div class="black"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code above is based on the code below which works for changing the style.display between "flex" and "none"</p>
  
  <pre><code>function setDisplay(className, displayValue) {
      var items = document.getElementsByClassName(className);
      for (var i=0; i &lt; items.length; i++) {
        items[i].style.flexDirection = displayValue;
      }
  }
  function showResponsive() {
      var elements = document.getElementsByClassName("main");
      Array.prototype.forEach.call(elements, function(el) {
        if (el.style.flex-direction === "column") {
            el.style.flex-direction = "row";
        } else {
            el.style.flex-direction = "column";
        }
      });
  }
  </code></pre>