Toggle or Show or Hide is pretty easy with AngularJS

Here is my first and simple example on AngularJS Framework – seriously I will forget jQuery soon 🙂

As I just started exploring more on this AngularJS since a week – I thought I would share my experience to other front-end developers out there. Here is my first and basic example to either SHOW or HIDE or TOGGLE the content, it’s even easy with jQuery thought – but if you want to achieve the same without jQuery then this is the best example for you.

AngularJS Framework from Google
AngularJS Framework from Google

Some how I feel AngularJS is pretty easy and it is using Native JavaScript. Last week I have given an introduction on AngularJS, you can check this post in case you missed it.

Here is the code to Toggle content:

Click here to Toggle (show/hide) description
I am description for the above title, which was collapsed by default

I have just used “collapsed” as per my convenience, you can even have your own custom name or for it and make sure you have the same for ng-model too.

and here is the code to SHOW the description:

Click here to SHOW description
I am description for the above title, which was collapsed by default

Here I have used “expandme” which I am setting it as Yes/True on click of link.

Also Read:   swffit - Smart Flash Resize Script

and here is code to HIDE the layer or content or description:

Click here to HIDE description
I am description for the above title, which was collapsed by default

I hope even this is pretty explanatory.

You can check the preview in JSFiddle at: http://jsfiddle.net/sravkum/EhTZW/

Hope this helped you – let me know if you are looking for any tips or tricks in AngularJS, I will try to address the same.

And look forward for more examples on AngularJS – Will keep you updated with simple tricks!

Join thousands of subscribers

And get updates as and when we publish new, informative and research based posts!

Thank you for subscribing.

Something went wrong.

4 thoughts on “Toggle or Show or Hide is pretty easy with AngularJS”

  1. Can you tell me how you created the facebook like popup in your website???? When I opened your page I saw the popup where you have only a like button?

Leave a Reply

Your email address will not be published. Required fields are marked *