Question

I'm trying to create a small animation when button is clicked it will show a div and hide when its clicked again. searchPanel is opacity 0 in the css was hoping a toggle effect rather than showing/hiding.

<button class="searchCtrl" ng-click="clickthis">Toggle</button>
    <div class="searchPanel" ng-show="showthis">
        <form action="">
                <input type="text" placeholder="Enter postcodde" class="form-control input-sm mb-10">
                <select name="jobtype" id="" class="form-control input-sm">
                    <option value="permanent">Permanent</option>
                    <option value="parttime">Part-time</option>
                    <option value="contract">Contract</option>
                </select>
        </form>
    </div>

.searchPanel{
    position: relative;
    z-index: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    display: inline-block;
    padding: 15px;
    //opacity: 1;
}
button{
    position: relative;
    display: block;
}

Answer 1

You can use this:

 <button class="searchCtrl" ng-click="showthis=!showthis">Toggle</button>

to show/hide the animation. here is a pluncker: pluncker

Answer 2

here there's a jsFiddle with your working example. You just have to change your buttong to

<button class="searchCtrl" ng-click="showThis=!showThis">Toggle</button>

try reading the docs for ngClick.

ngshow/hide angular using ng-click

2 个答案: