Не работает метод hide() JQuery

$(function() { 
  $('.spoiler-body').hide(); 
  $('.spoiler-head').click(function() { 
    $(this).next().toggle(); 
    var $self = $(this).children().children(); 
    if ($self.html() == "gear_fill") { 
      $self.html("gear") 
    } else { 
      $self.html("gear_fill") 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="list-block"> 
  <ul id="lifecycle spoiler-body"> 
    <li> 
      <a href="#waterfall" class="item-link item-content"> 
        <div class="item-media"><i class="f7-icons colorDark">layers_fill</i> 
        </div> 
        <div class="item-inner"> 
          <div class="item-title">Модель</div> 
        </div> 
      </a> 
    </li> 
  </ul> 
</div>

Вы обращаетесь к классу, а атрибут в разметке указан как айди:

<ul id="lifecycle spoiler-body">

Чтобы код заработал, надо исправить, например, разметку вот так:

<ul id="lifecycle" class="spoiler-body">

Добавьте в css

.spoiler-body {
    display:none;
}

.hide() при загрузке не срабатывает, т.к. пока интерпретатор js не дойдет до hide() - элемент не скроется

Нет у Вас при загрузке элемента .spoiler-body он появляется после загрузки всего документа. Перенесите Ваш код в обработчик DOMReady

jQuery(document).ready(function($) {
  $('.spoiler-body').hide();
  $('.spoiler-head').click(function() {
    $(this).next().toggle();
    var $self = $(this).children().children();
    if ($self.html() == "gear_fill") {
      $self.html("gear")
    } else {
      $self.html("gear_fill")
    }
  });
});