0

I have a link which when clicked should toggle the state of another div element(hide or show it). The problem which I am facing is it requires two clicks for me to set the visibility to true after loading the page.It doesnt set the the visibility to true on the first click

My HTML code:

<header class="dep_goals active">
  <a class="show_dep_goals">{href: 'javascript:void(0);', style: 
  'color: #f05831;'} Departments</a>
  <ul class="goal-type-selection"></ul>
</header>

My Backbone js event:

  DepartmentGoalsLayout.prototype.events = {
    'click .show_dep_goals': 'showDepGoals',   
  };

And the function showDepGoals:

  showBusinessGoals: (e) ->
    e.preventDefault()
    $(@el).find('.goal-business-type-selection').empty()
    @renderBusinesses()
    $(@el).find('.goal-business-type-selection').toggle()

How do I set the visibility of goal-business-type-selection to true on first click and then continue alternating between the true and false status of the visibility on each click? New to javascript!!

Mahesh Mesta
  • 793
  • 1
  • 11
  • 28
  • 1
    Backbone already keeps a reference to it's `el` jQuery object, [`this.$el`](https://stackoverflow.com/a/40321584/1218980) and it has an alias to `this.$el.find()` which is [`this.$('.selector')`](http://backbonejs.org/#View-dollar). – Emile Bergeron Feb 07 '18 at 14:17

1 Answers1

0

I add the following solutions. Seems to work for me.

In html code:

  <header class="dep_goals active">
    <a class="show_dep_goals">{href: 'javascript:void(0);', style: 
    'color: #f05831;'} Departments</a>
    <ul class="goal-type-selection hide"></ul>
  </header>

add a hide class to the ul element

And then in the showBusinessGoal function use a toggleclass with hide as parameter.

  showBusinessGoals: (e) ->
    e.preventDefault()
    $(@el).find('.goal-business-type-selection').empty()
    @renderBusinesses()
    $(@el).find('.goal-business-type-selection').toggleClass('hide')
Mahesh Mesta
  • 793
  • 1
  • 11
  • 28