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

WittySparks

Ignite Your Thoughts

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

Toggle or Show or Hide is pretty easy with AngularJS

Updated: January 30, 2022 by Sravan K • 2 min read

AngularJS Framework from Google

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?
  • Latest Java Technologies & Trends for 2020

Topic: Programming

Profile picture for Sravan K Article by

Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a Web enthusiast, who keeps on eye on all the latest happenings on web from AI to Web3, etc.

View all posts by Sravan K

Primary Sidebar

Featured Productivity Software

Notion logo
Notion

Notion Workspace can help you stay organized and take your productivity to the next level. Use Skillshare coupon code WITTYSPARKSFREE to watch the Notion Masterclass by Ali Abdaal for FREE.

Take Free Notion Masterclass

The Best Digital Marketing Tool

Semrush logo
Semrush

Semrush helps grow your business on your terms and gets to the top with 55+ marketing tools in 1. Get a flat 40% discount on Guru plan or Try 14-day PRO Trial.

Try Semrush for FREE

Footer

Explore Topics

  • Technology
  • Business
  • Marketing
  • SEO
  • View All Topics

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Affiliate Link Disclosure

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

Follow Us

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

Copyright © 2023 WittySparks - All rights reserved.
Hosted on Rocket.net

  • About Us
  • Contact Us
  • Privacy Policy