Replace Content of a Div on single page site

Question

So I've been building a site based off a template I found online, a would appreciate any help getting it to function how I want it to. Currently its set up with filters that allow you to sort through multiple thumbnails. However I want the links that currently act as "filters" to instead replace the div where all the thumbnails show up.

I've searched around here looking at jQuery, to replace div content, including replacing the contents of the div, and hiding divs and showing them on click. Nothing I seem to do works though.

Ideally, I'd wrap the current UL in a div named "designprojects" and then when I click a filter that div gets replaced with a new one that has project info in it.

Here is the current HTML and Javascript that the site uses to make the filters function:

filter = function() {
  if ($('#projects').length > 0) {
    var $container = $('#projects');

    $container.imagesLoaded(function() {
      $container.isotope({
        // options
        animationEngine: 'best-available',
        itemSelector: '.item-thumbs',
        layoutMode: 'fitRows'
      });
    });


    // filter items when filter link is clicked
    var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

    $optionLinks.click(function() {
      var $this = $(this);
      // don't proceed if already selected
      if ($this.hasClass('selected')) {
        return false;
      }
      var $optionSet = $this.parents('.option-set');
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      // make option object dynamically, i.e. { filter: '.my-filter-class' }
      var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
      // parse 'false' as false boolean
      value = value === 'false' ? false : value;
      options[key] = value;
      if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
        // changes in layout modes need extra logic
        changeLayoutMode($this, options)
      } else {
        // otherwise, apply new options
        $container.isotope(options);
      }

      return false;
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Portfolio Projects -->
<div class="row">
  <div class="span3">
    <!-- Filter -->
    <nav id="options" class="work-nav">
      <ul id="filters" class="option-set" data-option-key="filter">
        <li class="type-work">Projects</li>
        <li><a href="#filter" data-option-value="*" class="selected">All Projects</a></li>
        <li><a href="#filter" data-option-value=".StarbucksCSR">Starbucks CSR Project</a></li>
      </ul>
    </nav>
    <!-- End Filter -->

  </div>

  <div class="span9">
    <div class="row">
      <section id="projects">
        <ul class="thumbs">
          <!-- Item Project and Filter Name -->
          <li class="item-thumbs span3 StarbucksCSR">
            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Project Title" href="_include/img/work/full/url.jpg">
              <span class="overlay-img"></span>
              <span class="overlay-img-thumb font-icon-plus"></span>
            </a>
            <!-- Thumb Image and Description -->
            <img src="_include/img/work/thumbs/url.jpg" alt="Project info">
          </li>
          <!-- End Item Project -->

        </ul>
      </section>

    </div>
  </div>
</div>
<!-- End Portfolio Projects -->

To recap, when I click "All Projects" I want to see thumbnails that I can click and make full screen (current function, also want this to be the default).

When I click a project name, I want the div that holds all the thumbnails to be replaced with a paragraph about the project, and additonal thumbnails that can be clicked to extend to full screen.

My current progress can be seen at www.codyshipman.com

Answer 1

Look in the jQuery's .html() function. If you want to replace content of a <div> element, pass the new content as parameter to the .html(newContentAsString) function, for that <div> element. Look at the documentation for more info.