I am stuck on the above section of the project to create the restaruant locator.   Up until this point everything looks fine.   But in the last part where I need to display more details the code doesn't work,   The code I have is:
 

<aura:component controller="InTheAreaNew" implements="force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId" access="global" >
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="defaultSearch" type="String" default="Restaurants" />
<aura:attribute name="location" type="Object" default='{"coords":{"latitude":37.7938462, "longitude":-122.3970253}}' />
<aura:attribute name="restaurantList" type="Object" />
<aura:attribute name="openItem" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <div class="slds-box small" aura:id="main">
      <div aura:id="panelList">
      <header>
        <h2 class="slds-text-heading--small slds-m-bottom--small">In the Area</h2>
        <div class="slds-form-element">
          <label class="slds-form-element__label slds-assistive-text" for="searchBox">Search</label>
          <div class="slds-form-element__control">
            <ui:inputText aura:id="searchTerm" label="" class="field" placeholder="Search for..." change="{!c.updateSearch}" />
          </div>
        </div>
      </header>
      <div class="slds-scrollable--y scroll-container" aura:id="scrollableArea">
          <ul class="slds-list--vertical slds-has-dividers--top-space">
              <aura:iteration items="{!v.restaurantList}" var="item" indexVar="i">
                  <li class="slds-list__item" onclick="{!c.showDetails}" data-record="{!i}">
                      <h3 class="slds-text-heading--small slds-m-bottom--x-small">{!item.name}</h3>
                      <img src="{!item.ratingImg}" alt="" class="ratingStars" />
                      <div class="slds-hide" data-details="{!i}">
                          <ul class="slds-list--vertical">
                              <li class="slds-list__item">{!item.address}</li>
                              <li class="slds-list__item">{!item.city}, {!item.state}</li>
                              <li class="slds-list__item">{!item.phone}</li>
                          </ul>
                          <div class="slds-media slds-m-top--medium">
                              <div class="slds-media__figure">
                                  <img src="{!item.image}" class="slds-avatar--large slds-avatar--circle" alt="Placeholder" />
                              </div>
                              <div class="slds-media__body">
                                  <p>{!item.review}</p>
                              </div>
                          </div>                        
                      </div>
                  </li>
              </aura:iteration>
        </ul>
      </div>
      </div>
      <div class="slds-spinner_container" aura:id="spinner">
      <div class="slds-spinner--brand slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>
      </div>
    </div>
  </div>
</aura:component>

and:
 

({
    doInit: function(component, event, helper) {
        helper.getLocalList(component);
    },
    updateSearch: function(component, event, helper) {
        helper.getLocalList(component);
    },
    showDetails: function (component, event, helper) {
        var closeItem = component.get('v.openItem');
        console.log("The closedItem: ", closeItem);
        if (closeItem) {
            closeItem = closeItem.querySelector('[data-details]');
            $A.util.addClass(closeItem, 'slds-hide');
        }
        var selectedItem = event.currentTarget;
        component.set('v.openItem', selectedItem);
        console.log("The selectedItem: ", selectedItem);
        var itemDetails = selectedItem.querySelector('[data-details]');
        $A.util.removeClass(itemDetails, 'slds-hide');
    }
})

I get an error of either selectedItem.querySelector or closedItem.querySelector not a function when I click on the restaurant name.   I am brand new to javascript so I am sure I just don't understand this fully.   Any help in this would be amazing.

<!--campingListItem.cmp-->
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" required="true"/>

	<ui:outputText value="{!v.item.Name}" />
	<ui:outputCheckbox value="{!v.item.Packed__c}" />
	<ui:outputCurrency value="{!v.item.Price__c}" />
	<ui:outputNumber value="{!v.item.Quantity__c}" />
	<ui:button label="Packed!" press="{!c.packItem}"/>
	
</aura:component>

<!--campingListController.js-->
({
	packItem : function(component, event, helper) {
		var button = event.getSource().get("v.disabled");
		component.set("v.item.Packed__c", "true");
		component.set(button, "true");
	}
})

What am I doing wrong?

 

I have a very strange error with https://developer.salesforce.com/trailhead/lex_dev_lc_basics/lex_dev_lc_basics_create. I have added a style to my campingHeader component:

.THIS {
}

h1.THIS {
   font-size:18px;  
}

but trailhead returns an error:
Challenge Not yet complete... here's what's wrong:
The component is not using the correct font size.

Anybody can help?

<!--campingListItem.cmp-->
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" required="true"/>

	<ui:outputText value="{!v.item.Name}" />
	<ui:outputCheckbox value="{!v.item.Packed__c}" />
	<ui:outputCurrency value="{!v.item.Price__c}" />
	<ui:outputNumber value="{!v.item.Quantity__c}" />
	<ui:button label="Packed!" press="{!c.packItem}"/>
	
</aura:component>

<!--campingListController.js-->
({
	packItem : function(component, event, helper) {
		var button = event.getSource().get("v.disabled");
		component.set("v.item.Packed__c", "true");
		component.set(button, "true");
	}
})

What am I doing wrong?