CODEWITHSUNDEEP
javascriptjquerycss
SGBurek
SGBurek

Reputation: 13

Toggle isn't working for my jQuery

so currently I have a program written where when you click a news '.article' headline, the '.description' pops down underneath and the headline is highlighted grey and all the other headlines to remain closed. Then, when you click another headline, the first one you clicked closes and the new one is highlighted and open. the javascript looks like this:

var main = function() {
$('.article').click(function() {
    $('.article').removeClass('current');
    $('.description').hide();

    $(this).addClass('current');
    $(this).children('.description').toggle();
});

};

$(document).ready(main);

Here is the the CSS for 'current' looks like this:

.current .item {
 background: rgba(206,220,206,.9);
}

Now, my question is, I want the currently open article to close when you click it again. That's why I wrote the toggle command $(this).children('.description').toggle(); instead of just .show()

But it's not toggling...why? It opens, but it won't close unless I click another article headline. I hope I've made sense in what I've written. This is my first attempt at learning javascript and I could use the help.

full disclosure: this is from codeacademy's lesson on building an interactive website but their Q/A didn't have the answer to my problem and apparently it's not monitored any longer because they are discontinuing this lesson.

EDIT: as requested, here is a sample of the HTML (it's really long so I didn't want to post the whole thing but I will if you want).

<div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

Thank you,

learninghowtocode

Upvotes: 0

Views: 135

Answers (2)

Wesley Smith
Wesley Smith

Reputation: 19571

The issue is that $('.description').hide(); hides ALL the .description elements then you toggle the current ones to show. You need to only hide the ones that are not children of the current article

Here is a simpler method (Based off Scott's answer, gotta love how we all push each other to be better ):

$(document).ready(function() {
  $('.article').on('click', function() {
    var $this=$(this).toggleClass('current'); 
    $('.article').not($this).removeClass('current');
  });
});
.current .item {
  background: rgba(206, 220, 206, .9);
}
.article:not(.current) .description {
  display: none;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article">
  <div class="item row">
    <div class="col-xs-3">
      <p class="source">AW Commercial Aviation</p>
    </div>
    <div class="col-xs-6">
      <p class="title">CSeries Supplier Scramble</p>
    </div>
    <div class="col-xs-3">
      <p class="pubdate">Mar 22</p>
    </div>
  </div>
  <div class="description row">
    <div class="col-xs-3">&nbsp;</div>
    <div class="col-xs-6">
      <h1>CSeries Supplier Scramble</h1>
      <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
    </div>
    <div class="col-xs-3">&nbsp;</div>
  </div>
</div>
<div class="article">
  <div class="item row">
    <div class="col-xs-3">
      <p class="source">AW Commercial Aviation</p>
    </div>
    <div class="col-xs-6">
      <p class="title">CSeries Supplier Scramble</p>
    </div>
    <div class="col-xs-3">
      <p class="pubdate">Mar 22</p>
    </div>
  </div>
  <div class="description row">
    <div class="col-xs-3">&nbsp;</div>
    <div class="col-xs-6">
      <h1>CSeries Supplier Scramble</h1>
      <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
    </div>
    <div class="col-xs-3">&nbsp;</div>
  </div>
</div>
<div class="article">
  <div class="item row">
    <div class="col-xs-3">
      <p class="source">AW Commercial Aviation</p>
    </div>
    <div class="col-xs-6">
      <p class="title">CSeries Supplier Scramble</p>
    </div>
    <div class="col-xs-3">
      <p class="pubdate">Mar 22</p>
    </div>
  </div>
  <div class="description row">
    <div class="col-xs-3">&nbsp;</div>
    <div class="col-xs-6">
      <h1>CSeries Supplier Scramble</h1>
      <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
    </div>
    <div class="col-xs-3">&nbsp;</div>
  </div>
</div>

Original Answer:

The issue is that $('.description').hide(); hides ALL the .description elements then you toggle the current ones to show. You need to only hide the ones that are not children of the current article with something like this:

$('.article').not($(this)).find('.description').hide();

$(document).ready(function() {
  $('.article').click(function() {
    $('.article').removeClass('current');
     $('.article').not($(this)).find('.description').hide();
    $(this).addClass('current');
    $(this).children('.description').toggle();
  });
});
.article.current {
  background: rgba(206, 220, 206, .9);
}
.article:not(.current) .description {
  display: none;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>
  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>
  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

Upvotes: 1

Scott
Scott

Reputation: 21890

Simplified.

You can merely toggle the class of the click element, no need to add and remove the same class. That's what toggleClass() is for.

Using a variable for the item to hide/show and using CSS to hide that class by default, is a bit more efficient. You don't have to wait for the DOM to load for things to hide.

var main = function() {
$('.article').on('click',function() {
	var desc = $(this).children('.description');
    $(this).toggleClass('current'); //simple class toggle on click element
    $(desc).toggle();
});

};

$(document).ready(main);
.current .item {
 background: rgba(206,220,206,.9);
}

.description { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
</div>

Upvotes: 1

Related Questions