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

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Subscribe
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 Kumar Kandagatla

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!

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • Upgradation to AngularJS 7: Summary and Features
  • A Factual Analysis On AngularJS Vs. ReactJS
  • Simple Profit or Loss Calculator with AngularJS
Launch Offer
Rocket.net - Managed WordPress hosting
Rocket.net - Managed WordPress hosting
$1 for first month, $25/month

A highly secured WordPress hosting platform powered by Cloudflare enterprises with customized services for agencies, eCommerce, and small businesses.

  • PageSpeed Guarantee
  • Ultra Secure Platform
  • FREE Migrations
  • Automatic Updates
Try for $1.00 Our Review
We earn a commission if you make a purchase, at no additional cost to you.

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Semrush - SEO and Marketing Tools
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Semrush - SEO and Marketing Tools
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « Avril Lavigne pregnant or emotional eating?
Next Post: WhatsApp or MessageMe or WeChat – Which one would you prefer? »

Reader Interactions

Profile picture for Anonymous

About Sravan Kumar Kandagatla

Founder of 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 Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Comments

  1. Profile picture for shadyshady says

    July 18, 2013 at 6:31 am

    Thank you, really usefull for me :)

  2. Profile picture for VivekanandVivekanand says

    October 3, 2013 at 10:11 pm

    Angular is awesome!…. thanks for sharing this Tip – Sravan!….

  3. Profile picture for Belal KhanBelal Khan says

    October 20, 2015 at 6:02 pm

    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?

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

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 © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure