Forecast - Using "toggle"


#1


https://www.codecademy.com/en/courses/jquery-ext/projects/jquery-prj_forecast

I'm just trying to understand exactly why this task works the way it does.

In the HTML page, all the information is there for the daily overview and the hourly, detailed forecast. Using the toggle jquery in your script makes it change between showing the hourly forecast or not.

Can anyone explain though, why does the hourly forecast start off hidden when the page is loaded?


<div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>today</p>
                </div>
                <div class="weather col-xs-3">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg">
                </div>
                <div class="weather col-xs-1">
                </div>
                <div class="high col-xs-2">
                  <p>68&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>37&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">68&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">59&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">46&deg;</p>
                </div>

var main = function() {
  $(".day").click(function(){
    $(this).next().toggle();
    $(this).find(".weekday span").toggleClass("glyphicon-minus");
  });
    
  
};

$(document).ready(main);


#2

Hi Chris,

It's being hidden by display: none;, line 73 in the CSS file :slight_smile:


#3

Ah cool, that simple!

Thanks for explaining :slight_smile:


#4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.