Hiding div javascript

Question

I currently have two divs on my page, one called results, one called portfolio on my site. I have some javascript that toggles between the two. Currently, the portfolio div loads, but I would like to switch the order. At first, this appeared to be very simple, I would just switch the

    <div style="display:none">

to the results section, however this throws off my page. Here's all the html markup.

        <script type="text/javascript">
            function swap(one, two) {
            document.getElementById(one).style.display = 'block';
            document.getElementById(two).style.display = 'none';
        }
        </script>

                <span id="two">
                    <header class="title one">Portfolio</header>
                    <div class="spacer"></div>
                    <div class="title two"><?php echo fuel_var('body', 'This is a default layout. To change this layout go to the fuel/application/views/_layouts/main.php file.'); ?></div>
                    <section class="featured-slider">
                        <div id="ca-container" class="ca-container">
                            <div class="nav-featured">
                                <div class="prev-featured"></div>

                                <div class="next-featured"></div>
                            </div>
                            <div class="main-carousel hideme dontHide">
                                <div class="ca-wrapper portfolio_wrapper">
                                    <div class="ca-item ca-item-1">
                                        <div class="f-single">
                                            <a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_ARDL.png">
                                                <div class="f-image">
                                                    <img src="<?php echo base_url()?>assets/images/Clevelandmetroparks2.jpg" alt='img'>
                                                    <div class="image-hover-overlay"></div>
                                                    <span class="f-category"></span>
                                                    <div class="portfolio-meta">
                                                        <div>ARDL</div>
                                                        <div class="clear"></div>
                                                        <div>Database Screenshot</div>
                                                    </div>
                                                </div>
                                                <div class="f-info">ARDL</div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="ca-item ca-item-2">
                                        <div class="f-single">
                                            <a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Polymerics.png">
                                                <div class="f-image">
                                                    <img src="<?php echo base_url()?>assets/images/Archive/Polymerics" alt='img'>
                                                    <div class="image-hover-overlay"></div>
                                                    <span class="f-category"></span>
                                                    <div class="portfolio-meta">
                                                       <div>Polymerics</div>
                                                        <div class="clear"></div>
                                                        <div>Database Screenshot</div>
                                                    </div>
                                                </div>
                                                <div class="f-info">Polymerics</div>
                                            </a>
                                        </div>
                                    </div>
                                   <div class="ca-item ca-item-3">
                                        <div class="f-single">
                                            <a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Raune.png">
                                                <div class="f-image">
                                                    <img src="<?php echo base_url()?>assets/images/Archive/Ru.jpg" alt='img'>
                                                    <div class="image-hover-overlay"></div>
                                                    <span class="f-category"></span>
                                                    <div class="portfolio-meta">
                                                        <div>Ruane Attorneys</div>
                                                        <div class="clear"></div>
                                                        <div>Database Screenshot</div>
                                                    </div>
                                                </div>
                                                <div class="f-info">Ruane Attorneys</div>
                                            </a>
                                        </div>
                                    </div>
        <!--
                                    <div class="ca-item ca-item-4">
                                        <div class="f-single">
                                            <a data-gal="prettyPhoto[gallery1]" href="img/screenshots/AW_results_connecticut.png">
                                                <div class="f-image">
                                                    <img src="img/featured/feat-04.jpg" alt='img'>
                                                    <div class="image-hover-overlay"></div>
                                                    <span class="f-category"></span>
                                                    <div class="portfolio-meta">
                                                        <div>Connecticut Public Defenders</div>
                                                        <div class="clear"></div>
                                                        <div>Database Screenshot</div>
                                                    </div>
                                                </div>
                                                <div class="f-info">Connecticut Public Defenders</div>
                                            </a>
                                        </div>
                                    </div>
        -->
                                    <div class="ca-item ca-item-5">
                                        <div class="f-single">
                                            <a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>images/screenshots/AW_results_ clevMetroparks.png">
                                                <div class="f-image">
                                                    <img src="<?php echo base_url()?>assets/images/Archive/Clevelandmetroparks.jpg" alt='img'>
                                                    <div class="image-hover-overlay"></div>
                                                    <span class="f-category"></span>
                                                    <div class="portfolio-meta">
                                                        <div>Cleveland Metroparks</div>
                                                        <div class="clear"></div>
                                                        <div>Database Screenshot</div>
                                                    </div>
                                                </div>
                                                <div class="f-info">Cleveland Metroparks</div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                      </div>
                    </section>
                    <div>
                    </div>
                    </span>
                    <div style="display:none" id="one">
                    <header class="title one">Results</header>
                    <div class="spacer"></div><br><br>
                    <section class="featured-slider">
                        <div id="ca-container" class="ca-container">
                            <div class="main-carousel hideme dontHide">
                                <div class="ca-wrapper results_wrapper">
                                         <div class="ca-item ca-item-1">
                                        <div class="f-single_two">
                                            <a href="https://vimeo.com/84619379" class="mfp-iframe" title="My YouTube Video">
                                                <div class="f-image">
                                                    <img src="<?php echo base_url()?>assets/images/reslults_shit/cle2.jpg" alt='img'>
                                                    <div class="image-hover-overlay"></div>
                                                    <span class="f-category"></span>
                                                    <div class="portfolio-meta">
                                                        <div>Cleveland Metroparks</div>
                                                        <div class="clear"></div>
                                                        <div>Database Video</div>
                                                    </div>
                                                </div>
                                                <div class="f-info">Cleveland Metroparks</div>
                                            </a>
                                        </div>
                                    </div>
                                  <div class="ca-item ca-item-2">
                                        <div class="f-single_two">
                                            <a href="http://vimeo.com/84619331" class="mfp-iframe" title="My YouTube Video">
                                                <div class="f-image">
                                                    <img src="<?php echo base_url()?>assets/images/reslults_shit/connecticut2.jpg" alt='img'>
                                                    <div class="image-hover-overlay"></div>
                                                    <span class="f-category"></span>
                                                    <div class="portfolio-meta">
                                                        <div>Connecticut Public Defenders</div>
                                                        <div class="clear"></div>
                                                        <div>Database Video</div>
                                                    </div>
                                                </div>
                                                <div class="f-info">Connecticut Public Defenders</div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="ca-item ca-item-3">
                                        <div class="f-single_two">
                                            <a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/Screenshots/AW_Portfolio_ARDL.png">
                                                <div class="f-image">
                                                    <img src="<?php echo base_url()?>assets/images/reslults_shit/ardl2.jpg" alt='img'>
                                                    <div class="image-hover-overlay"></div>
                                                    <span class="f-category"></span>
                                                    <div class="portfolio-meta">
                                                        <div>ARDL</div>
                                                        <div class="clear"></div>
                                                        <div>Database Screenshot</div>
                                                    </div>
                                                </div>
                                                <div class="f-info">ARDL</div>
                                            </a>
                                        </div>
                                    </div>






                </article>

simplify your code and be more detailed about what the actual issue is — Huangism
– Huangism, Commented Jan 22, 2014 at 19:52
can you prepare a fiddle at jsfiddle.net? With a fiddle it would be easier for responders to look at your issue — hemanth
– hemanth, Commented Jan 22, 2014 at 19:52
Could you please refine your question (what do you mean by "throws off my page"?) and especially not post your whole original HTML file but instead provide us with a short example code? — RSeidelsohn
– RSeidelsohn, Commented Jan 22, 2014 at 19:53
Simplifying your code to just the blocks that you're attempting to swap would also possibly make it clearer to you exactly where the issue lies. Start by commenting out the internals of each div ("one" and "two") and see if you can get it to work that way, first, then start adding in pieces until something breaks. — Jason M. Batchelor
– Jason M. Batchelor, Commented Jan 22, 2014 at 19:56
I think this question is about HTML layout & styling, but at first glance looks like a scripting question. @Jake, can you post a screenshot of the "thrown off page" vs what it should look like? I created a jsfiddle but it's unclear what the problem is because the formatting is lost without your stylesheets. — Surreal Dreams
– Surreal Dreams, Commented Jan 22, 2014 at 19:58

Marlo C · Accepted Answer · 2014-04-24 18:06:43Z

3

if you're familiar with jQuery, there's a much easier way to do it.

$('#divName').hide();
$('#divName').show();

Put those inside your toggle/swap function.

P.S.: You prepend it with a '#' if you are using id (i.e.: div id="divName"), if you are using class you prepend it with a '.' You can also use $('#divName').css('display', 'none') and $('#divName').css('display', 'block').

edited Apr 24, 2014 at 18:06

answered Jan 22, 2014 at 19:55

Marlo C

6173 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Surreal Dreams Over a year ago

His scripting works fine, although jQuery does make this a lot more pleasant to deal with. I think the real problem is with his layout, but the details are lacking in the question.

416E64726577 · Accepted Answer · 2014-01-22 21:59:16Z

1

The following JavaScript should work:

<script>
function swap(one, two) {
    document.getElementById(one).style.display = 'block';
    document.getElementById(two).style.display = 'none';
}
</script>
<div id="first" style="display:none"><p>One</p></div>
<div id="second"><p>Two</p></div>

<button onclick="swap('first','second')">Swap</button>

answered Jan 22, 2014 at 21:59

416E64726577

2,2242 gold badges26 silver badges49 bronze badges

Comments

Jake Ols · Accepted Answer · 2014-01-27 18:21:26Z

0

I found a solution: I figured something was coming up when it displayed it as a block, so I changed my javascript to this:

<script type="text/javascript">
    function swap(one, two) {
    document.getElementById(one).style.height = '100%';
    document.getElementById(one).style.width = '100%';

    document.getElementById(two).style.height = '0';
    document.getElementById(two).style.width = '0';
}
</script>

Hope this helps anyone else.

answered Jan 27, 2014 at 18:21

Jake Ols

2,8623 gold badges20 silver badges29 bronze badges

Collectives™ on Stack Overflow

Hiding div javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related