user3183717 user3183717 - 1 year ago 73
AngularJS Question

AngularJS - Hide parent div on click, then display next div

I'm trying to use Angular to write a page where I have a form divided into multiple sections, and only one form section is displayed at a time. When clicking the button at the bottom of the section, the current section is hidden and the next form section in the HTML is displayed -- so on and so forth for many sections.

Here's my code so far:


<div class="form-section">
<!-- input fields -->

<a class="next">NEXT</a>


<div class="form-section">
<!-- input fields -->

<a class="next">NEXT</a>


<!-- more "form-section" divs -->


/* hide all form sections */
.form-section {

/* display first form section */
.form-section:first-child {

.next {

I'm pretty new at Angular so I'm pretty lost as to how to achieve this.

Answer Source

So to get you started (besides the google link I originally put) this is a super basic example showing one way on how to show and hide divs using angular. If I was making an actual app, I would probably use routes for this part, but for sake of simplicity I didn't. This could get you started in the right direction.


<div ng-app="MultiStep" ng-controller="FormController">
  Step {{currentStep}}
  <div ng-if="currentStep == 1">
    <input type="text" placeholder="Name"/>
  <div ng-if="currentStep == 2">
    <input type="email" placeholder="Email"/>
 <div ng-if="currentStep == 3">
    <labe>Male</labe><input type="radio" value="male" name="gender" /><br>
    <label>Female</label><input type="radio" value="female" name="gender" />
  <button ng-click="nextStep()">Next</button>


var app = angular.module('MultiStep', []);

app.controller('FormController', function($scope) {
  $scope.currentStep = 1;

  $scope.nextStep = function() {

Please, still look at some of the multistep tutorial

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download