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