• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Newsletter
WittySparks / Technology / Programming / Toggle or Show or Hide is pretty easy with AngularJS
AngularJS Framework from Google

Toggle or Show or Hide is pretty easy with AngularJS

Programming June 9, 2013 by Sravan K

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 for a week – I thought I would share my experience with 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.

Somehow I feel AngularJS is pretty easy and it is using Native JavaScript. Last week I have given an introduction to 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.

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 to more examples on AngularJS – Will keep you updated with simple tricks!

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
Previous Post: « Safety first with the Circle of 6 App
Next Post: WhatsApp or MessageMe or WeChat – Which one would you prefer? »
Profile picture for Sravan K

About Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan K

Primary Sidebar

Search

Exclusive Coupons

  • Moqups coupon code: WITTYSPARKS for 20% or PARTNERS50 for 50% discount.
  • WPForms coupon code: WITTYSPARKS for 50% off.
  • Serpstat coupon code: wittysparks_discount for 30% off.
  • SEO Buddy coupon code: WITTYSPARKS for 25% off.
  • Morningscore coupon code: wittysparks for 30% off for 3 months.
  • FlexClip coupon code: WITTYSPARKS for 30% off.
  • Uplead coupon code: “witty” for 30-day free trial.
  • FastestVPN coupon codes: WITTYSPARKS15 or WITTYSPARKS10 or Get up to 93% OFF.
  • Outranking.io coupon code: WITTYSPARKS50 for 50% off.

For more such offers visit our exclusive offers for SEO, Bloggers, Marketers and for Business owners.

Featured Productivity Software

Notion logo
Notion

Whether you’re a solo entrepreneur or a large team, Notion Workspace can help you stay organized and get more done. Get started today and take your productivity to the next level.

Try Notion for FREE

Footer

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2023 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • LinkedIn
  • Twitter
  • Like
  • Pinterest