My visibility_toggle is not working as i want it to

Question

HTML

<article class="col1 pad_left1">
    <div class="box1">
        <div class="box1_bot">
            <div class="box1_top">
                <div class="pad">
                     <h2>CLIENTS</h2>

                    <button style="background:url(images/box_top.jpg)  center top no-repeat; width:100%; text-align:center; padding:5px; color:white;" onclick="toggle_visibility('demo1');" id="C4M">Consultants4Manpower</button>
                    <div id="demo1" style: "visibility:hidden;">
                        <marquee behavior="scroll" direction="down">
                            <img src="images/CII logo.png" height="80px" width="80px" alt="">
                            <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
                            <br/>
                            <img src="images/Tie logo.png" height="80px" width="80px" alt="">
                        </marquee>
                    </div>
                    <hr/>
                    <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px;" onclick="toggle_visibility('demo2');" id="corporate">Corporate Training</button>
                    <div id="demo2" style: "visibility:hidden;">
                        <marquee behavior="scroll" direction="down">
                            <img src="images/CII logo.png" height="80px" width="80px" alt="">
                            <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
                            <br/>
                            <img src="images/Tie logo.png" height="80px" width="80px" alt="">
                        </marquee>
                    </div>
                    <hr/>
                    <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px;" onclick="toggle_visibility('demo3');" id="EPD">English & PD Training</button>
                    <div id="demo3" style: "visibility:hidden;">
                        <marquee behavior="scroll" direction="down">
                            <img src="images/CII logo.png" height="80px" width="80px" alt="">
                            <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
                            <br/>
                            <img src="images/Tie logo.png" height="80px" width="80px" alt="">
                        </marquee>
                    </div>
                    <hr/>
                    <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px; font-color:white;" onclick="toggle_visibility('demo4');" id="P4E">Paterns4Education</button>
                    <div id="demo4" style: "visibility:hidden;">
                        <marquee behavior="scroll" direction="down">
                            <img src="images/CII logo.png" height="80px" width="80px" alt="">
                            <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
                            <br/>
                            <img src="images/Tie logo.png" height="80px" width="80px" alt="">
                        </marquee>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

JAVASCRIPT

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
}

The problem i am facing is when i load the page all four sections shows the images scrolling at the same time.I want is when i go to the page no image-scrolling is visible.when i click on 1 say consultants4manpower then only images under that div becomes visible scrolling down.and further when i click on the 2nd the previous 1 become invisible and second gets visible. Look at the link: http://shubhamenterprises.education/about.html

Answer 1

There are a lot of places, you have given:

style:"visibility: hidden;"

The above code is wrong.

Since you have tagged it with jQuery, I would do something different using jQuery.

$(function() {
  $(".button").next().hide();
  $(".button").click(function() {
    $(".button").next().slideUp();
    $(this).next().slideToggle();
  });
});

.button {
  background: url(images/box_top.jpg) center top no-repeat;
  width: 100%;
  text-align: center;
  padding: 5px;
  color: white;
}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<article class="col1 pad_left1">
  <div class="box1">
    <div class="box1_bot">
      <div class="box1_top">
        <div class="pad">
          <h2>CLIENTS</h2>
          <button class="button">Consultants4Manpower</button>
          <div id="demo1">
            <marquee behavior="scroll" direction="down">
              <img src="images/CII logo.png" height="80px" width="80px" alt="">
              <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
              <br/>
              <img src="images/Tie logo.png" height="80px" width="80px" alt="">
            </marquee>
          </div>
          <hr/>
          <button class="button" id="corporate">Corporate Training</button>
          <div id="demo2">
            <marquee behavior="scroll" direction="down">
              <img src="images/CII logo.png" height="80px" width="80px" alt="">
              <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
              <br/>
              <img src="images/Tie logo.png" height="80px" width="80px" alt="">
            </marquee>
          </div>
          <hr/>
          <button class="button" id="EPD">English & PD Training</button>
          <div id="demo3" style: "visibility:hidden;">
            <marquee behavior="scroll" direction="down">
              <img src="images/CII logo.png" height="80px" width="80px" alt="">
              <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
              <br/>
              <img src="images/Tie logo.png" height="80px" width="80px" alt="">
            </marquee>
          </div>
          <hr/>
          <button class="button" id="P4E">Paterns4Education</button>
          <div id="demo4" style: "visibility:hidden;">
            <marquee behavior="scroll" direction="down">
              <img src="images/CII logo.png" height="80px" width="80px" alt="">
              <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
              <br/>
              <img src="images/Tie logo.png" height="80px" width="80px" alt="">
            </marquee>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

Answer 2

wrong:

<div id="demo3" style:"visibility:hidden;">

better:

<div id="demo3" style="visibility:hidden;">

best:

<style>
#demo3{
visibility:hidden;
}
</style>

although even there you are mixing visibility:hidden; with display:none; which is never a great idea