hide and show css

[davy_yg]

Hello,

I have been trying to hide and show css with button click:

home.blade.php

    #container{
      display: grid;
      grid-template-columns: 350px auto 300px;
      grid-template-rows: 800px 800px 800px;
      grid-template-areas:
            "menu cont sidenav";
      position: fixed;      
      z-index: 1;
      color: black;

    }

    menu {
      grid-area: menu; 
    }

    cont{
      grid-area: cont;
      background: white;
      padding: 50px;
    }

    cont p{ color:black; }

    sidenav {
      grid-area: sidenav;
      background: orange;
      padding: 50px;
      color: black;
    }

    ...

    <li>
                            <input id="c10" type="checkbox">
                            <label for="c10">
                                <a href="{{ action('HomeController@getArticles') }}" onclick="hidePages()">
                                    @if($uri=="home/articles")
                                        <!-- <img src="{{url("")}}/images/button-10-hover.png"/> -->
                                        <div id="circle1"><div style="margin: -10px 0 0 0;"><img src="{{url("")}}/images/add/icons5-hover.png" width="30px" /></div></div>
                                    @else
                                        <!-- <img src="{{url("")}}/images/button-10.png"/> -->
                                        <div id="circle1"><div style="margin: -10px 0 0 0;"><img src="{{url("")}}/images/add/icons5.png" width="30px" /></div></div>
                                    @endif
                                </a>
                            </label>
                        </li>

                        <li>
    ...

    <script>
function hidePages() {
    var x = document.getElementById("container");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

pages.blade.php

<section id="container">
    <menu></menu> 

    <cont>

        <center><b>{{ $pages2->pages_title }}</b></center><br> 

        {!! $pages2->pages_content !!}

    </cont>

    <sidenav>

        @foreach( $pages as $p) 

        <a href="{{url('')}}/home/pages/{{ $p->id }}">{{ $p->pages_name }}</a><br><br>    

        @endforeach 

    </sidenav>

</section>    

I am using the grid system. Since it only works in <div id="container"> while I need to use <section id="container"> to make the grid system works. now what should I do? I need to hide whole whole container since it is overlapping the articles.

Well I already try using the <div id="container"> and it still does not hide the content under it.

[gentlemedia]

I am using the grid system. Since it only works in <div id="container"> while I need to use <section id="container"> to make the grid system works.

This doesn't make any sense. An ID is an ID no matter what HTML tag it is.

Also you made up HTML tags such as cont & sidenavand the menu tag is experimental ans has little browser support. You can use those names as grid-area names to use in your grid-area-template declleration, but they can't be HTML elements itself. Unless you create those elemenb with JS like HTML5shiv did to bring support of the new HTML5 elements (section, main, nav, etc.) to old IE and such. But no need for that and would be rediculous..., just use existing HTML elements or tags for them.

... container since it is overlapping the articles.

This is because of the fixed position. Why are you using that?

[davy_yg]

Cek the site: http://fresway.com/home/pages/1

I am using fix position to make it looks good since it has a really long scroll to the bottom. I am going to limit using short article.

One problem, I try to open it in IE and it looks a mess. In firefox and google crome it looks good. Why is that?

Also, I wonder why the pages do not appear when I place it online. It works well when it is offline.

[gentlemedia]

Check the errors in your browser (web developer) console and https://validator.w3.org/

[gentlemedia]

Also...

One problem, I try to open it in IE and it looks a mess. In firefox and google crome it looks good. Why is that?

You're using CSS Grid which is not supported in any version of IE. If you want to use CSS Grid, you should create a fallback solution for browsers that don't support this new layout module.

[diafol]

Use the caniuse site

[pty]

Seeing as you're already loading Bootstrap, why not just use it?