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

Question

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:

HTML:

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

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

    </div>

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

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

    </div>

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

CSS:

/* hide all form sections */
.form-section {
   display:none;
}


/* display first form section */
.form-section:first-child {
   display:initial;
}

.next {
   cursor:pointer;
}

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

I don't see anything showing you attempted this on your own. google.com/… — Ronnie
– Ronnie, Commented Oct 20, 2016 at 23:57
That's fair, though I couldn't even think of the term to use to Google it. This sends me on the right track though, so thank you. — user3183717
– user3183717, Commented Oct 21, 2016 at 0:02

Ronnie · Accepted Answer · 2016-10-21 16:10:10Z

2

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.

https://jsfiddle.net/t76e8gt9/

HTML

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

JS

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

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

  $scope.nextStep = function() {
    $scope.currentStep++;
  }
});

Please, still look at some of the multistep tutorial

answered Oct 21, 2016 at 16:10

Ronnie

11.2k22 gold badges85 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3183717 Over a year ago

I marked this correct since it's exactly what I was looking for in the original question, but the multi-step form you linked via Google was also super helpful and got me where I needed to be last night after I posted this. Thank you very much!

Hiro · Accepted Answer · 2016-10-21 07:16:09Z

0

You need to call function on the anchor tag using angular ngClick. In that just change the $scope variable value true or false.

<div ng-controller="MainCtrl">
<form>
    <div class="form-section" ng-if="firstForm">
        <!-- input fields -->

        <a class="next" ng-click="showForm('First')">NEXT</a>

    </div>

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

        <a class="next" ng-click="showForm('Second')">NEXT</a>

    </div>

    <!-- more "form-section" divs -->
</form>
</div>
app.controller('MainCtrl', function($scope) {

 $scope.firstForm = true;   
 $scope.secondForm = false; 


$scope.showForm = function(param) {

switch(param){  
  case 'First':  
    $scope.firstForm = true;  
    $scope.secondForm = false;
    break;

case 'Second':  
$scope.firstForm = fale;  
$scope.secondForm = true;  
break;

default:   
  $scope.firstForm = true;  
  $scope.secondForm = false;  
  break;  

} 

}
});

answered Oct 21, 2016 at 7:16

Hiro

866 bronze badges

2 Comments

Aniket Sinha Over a year ago

If you have n number of elements, will you create n variables for each elements in the form?

Hiro Over a year ago

If you have lots of elements which are not manageable with the variables then you can use ng-class to add for selector and display that div only.

Aniket Sinha · Accepted Answer · 2016-10-21 07:25:29Z

Depends on what you mean by hide, you can either use ng-if or ng-show/ng-hide to selectively display stuff on screen.

ng-if will not render the DOM whereas ng-show/ng-hide will use CSS to set it's display as none.

You can have something like:

<form>
<div class="form-section" ng-if="condition == 'div1'">
    <!-- input fields -->

    <!--Some way to change value of condition-->
    <a class="next" ng-click="showDiv('div2')">NEXT</a>

</div>

<div class="form-section" ng-if="condition == 'div2'">
    <!-- input fields -->

    <a class="next" ng-click="showDiv('div3')">NEXT</a>

</div>

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

And have a JS function to change value of condition.

$scope.showDiv = function(divName) {
  $scope.condition= divName;
}

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related