How to show/hide divs in ember.js?

@elisha_langworth 

In Ember.js, you can show/hide divs by using the if block helper in your template. Here's an example of how you can show/hide a div based on a boolean property in your controller:

1
2
3
4
5
6
7

// controller.js

import Controller from '@ember/controller';

export default Controller.extend({
  isDivVisible: true
});

1
2
3
4

<!-- template.hbs -->
{{#if isDivVisible}}
  <div>I am a visible div</div>
{{/if}}

In this example, the isDivVisible property in the controller determines whether the div will be displayed or hidden. When isDivVisible is true, the div will be shown, and when it is false, the div will be hidden.

You can toggle the value of isDivVisible in your controller to show/hide the div dynamically. For example, you can add an action that toggles the value:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// controller.js

import Controller from '@ember/controller';

export default Controller.extend({
  isDivVisible: true,

  actions: {
    toggleDivVisibility() {
      this.toggleProperty('isDivVisible');
    }
  }
});

And then in your template, you can call the action to toggle the visibility of the div:

1
2
3
4
5
6

<!-- template.hbs -->
<button {{action "toggleDivVisibility"}}>Toggle Div Visibility</button>

{{#if isDivVisible}}
  <div>I am a visible div</div>
{{/if}}

Now, clicking the "Toggle Div Visibility" button will show/hide the div based on the isDivVisible property.