4/10 Hiding the description


#1

This is driving me absolutely up the wall. I've checked and checked my code and can't figure out where the mistake is. The article descriptions with toggle out to show, but won't hide again when I click them. The answer is accepted, but it obviously doesn't work. What am I doing wrong?

var main = function() {
$('.article').click(function() {
    $('.description').hide();
    
    $(this).children('.description').show();
});
};

$(document).ready(main);

#2

Hey @cloudjumper32406! I dont know if you actually have this in your code but at the beggining and end of code you have unnecesary like quotes '' . Other than that i pasted your code and it worked! :smiley:


#3

the single quotations were added in when i was trying to post the code. they aren't in my actual code and it's still not working.


#4

Hmm can you show your HTML code? If thats good then try resetting your exercise, or changing your browser(preferably chrome).


#5

Here's the HTML. I haven't touched it while working on these exercises, but maybe something is messed up. I'm already working in Chrome and have refreshed the browser a few times.

<!doctype html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="articles container">
      
      <div class="article current">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 23</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
            <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</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 business aviation</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Flying the Gulfstream G650</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>Flying the Gulfstream G650</h1>
            <p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</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">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">New retirements cut RAF VC10 fleet to four</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>New retirements cut RAF VC10 fleet to four</h1>
            <p>The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...</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">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Virgin can deliver more value for Delta than for SIA: Bastian</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Jul 17</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>Virgin can deliver more value for Delta than for SIA: Bastian</h1>
            <p>Delta Air Lines president Ed Bastian is confident that the carrier can extract far more value from its shareholding in Virgin Atlantic compared with...</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 Defense</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Freedom Experiences Two More Power Outages</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>Freedom Experiences Two More Power Outages</h1>
            <p>The Littoral Combat Ship (LCS-1) USS Freedom’s first overseas deployment to Southeast Asia has been marred by two more power outages...</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">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">FedEx to acquire up to 30 United 757s</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>FedEx to acquire up to 30 United 757s</h1>
            <p>United Airlines is to sell up to 30 Boeing 757s to freight operator FedEx Express, with deliveries of the twinjets set to start this year.</p>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

#6

Hi Ani,

I'm not sure why, but being able to both hide and show the description isn't intended behavior for the exercise.
If you use toggle() instead of show(), I expect you'll be able to hide articles after showing them :)