hide pages with Jquery

[davy_yg]

Hello,

I wonder why I cannot hide pages with Jquery?

home.blade.php

        <li> <input id="c10" type="checkbox"> <label for="c10"> <!-- <a href="#" @click.prevent="togglePage()"> --> <a href="{{ action('HomeController@getArticles') }}" id="hide">
                                    @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>

                        ...

                        <script>

                        $( "#hide" ).click(function() {
                                  $( "#container" ).hide( "slow", function() {
                                alert( "Animation complete." );
                          });
                        });

                        </script>

pages.blade.php

@extends('home')

@section('title', 'Home')

@section('content')
    <section v-show="visiblePage" id="container"> <menu></menu> <cont> <center><b>{{ $pages2->pages_title }}</b></center><br> 

        {!! $pages2->pages_content !!}

    </cont> <sidenav> <label for="c500" onclick="alert(1)">Label</label> <a href="#" @click.prevent="togglePage()">Test</a>
        @foreach( $pages as $p) 

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

        @endforeach 

    </sidenav> </section> 

[davy_yg]

Here I simplify the codes and when I press hide button it still does not hide the container. I wonder why?

pages.blade.php

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

    <cont>

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

        {!! $pages2->pages_content !!}

    </cont>

    <sidenav>

        <button id="hide">Hide</button>
        <!-- <a href="#" id="hide">Click</a> -->
        <label for="c500" onclick="alert(1)">Label</label>

        <a href="#" @click.prevent="togglePage()">Test</a>
        @foreach( $pages as $p) 

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

        @endforeach 

    </sidenav>

</section>           

</div>    
</div>

@endsection

@section('js')

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>

$( "#hide" ).click(function() {
      $( "#container" ).hide().fadeIn();
});

</script>

[cereal]

Hi,

fadeIn() unhides the element, so it reverse what is done by hide(). Here you want to use hide() or fadeTo(), not both:

$("container").hide();          // <- method 1, immediate hide
$("container").fadeTo(250, 0);  // <- method 2, with transition

A part this your snippet works for me on jsfiddle:

• http://jsfiddle.net/wj4vmmef/

A question: what is <cont>? I don't find it in the HTML5 tag list.

[davy_yg]

I try changing the js file into this:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>

$( "#hide" ).click(function() {
  $( "container" ).hide();
});

</script>

When I press the hide button nothing happen.

[gentlemedia]

What for errors do you get in your console?

[davy_yg]

TypeError: $(...).html5imageupload is not a function[Learn More]  1:1185:5
<anonymous> http://localhost/soulfy_repo/public_html/home/pages/1:1185:5

TypeError: $(...).nestednav is not a function[Learn More]  1:1512:5
<anonymous> http://localhost/soulfy_repo/public_html/home/pages/1:1512:5

 TypeError: $(...).tooltip is not a function[Learn More]  1:929:7
<anonymous> http://localhost/soulfy_repo/public_html/home/pages/1:929:7
fire https://code.jquery.com/jquery-1.10.2.js:3048:10
fireWith https://code.jquery.com/jquery-1.10.2.js:3160:7
ready https://code.jquery.com/jquery-1.10.2.js:433:3
completed https://code.jquery.com/jquery-1.10.2.js:104:4

 Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.  jquery-1.10.2.js:5375:28