Angularjs hide and show according to screen size responsive


Tags: javascript,css,angularjs,responsive-design

Problem :

Hi every one I am trying to achieve this

enter image description here

When the user is on desktop, he should see the block when he visits the page, and the user should see the button when he is on mobile and then he should be able to toggle it.

I am able to show the button using CSS media query by setting display: none when screen size is <480px and also able to revert the display: none to block by adding ng-click="showBlocks={'display': 'block'}

But I am not sure how can i make it work in a sense when I click on it again it should hide the blocks again.

I have tried ng-hide/show but it doesn't work unless i remove display:none for the mobile size and when i do remove it then I am not able to see the blocks when visit the page for first time.

Please help me I have wasted so much time on it. Thanks in advance



Solution :

Without a code sample it's hard to tell where you are. If you managed to get the button to hide the blocks (like you said with ng-click="showBlocks={'display': 'block'}) then adding a variable should be enough. Add this to the button element:

ng-init="show=true;" ng-click="show = !show; showBlocks={'display': (show?'block':'none')};"

If that works, then move the initialisation logic to the controller to keep things clean.


    CSS Howto..

    How to include google search result in my specified div width and height?

    Javascript - how to show and hide an element per second?

    How to increase the distance between table columns in html?

    How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

    How to change CSS styling from within Angular 2 Component

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    CSS - Minus top value how to get rid of the gap below it

    How do I stop richfaces adding borders to panels and calendars?

    How can I make LIs push their siblings to the same height?

    How to set different table widths using CSS or jQuery?

    How to display grid line on top of highchart

    How to not send images to mobiles in a semantic manner

    How to optimize an image sequence in Chrome?

    ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

    Unsure of how to wrangle my javascript dependencies

    How do I make a text input non-editable?

    How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

    How can i apply background-image to low div

    How to display message inline

    CSS: how to enforce word wrap on an odd situation?

    Only Lower Half Of The Border Is Shown

    How do three.js transforms and CSS3 3D-transforms correspond?

    Simple Form button submit doesn't show in IE 8-7

    How to stop CSS within a RichText field from overwriting document

    How to implement block style for list

    How to make a basic event calendar with javascript, jquery, html and css?

    how do angularJS user handle - using bootstrap css/fonts but exclude the jquery controls - scenario

    CSS: How to fill a dynamic container that contains fixed sized elements?

    How does one change the colour of a div based on current time?

    How to preform whitelist-based CSS filtering in PHP