-1

The Pen is here

I've got two elements set to change width, increase or decrease, when a link/button is clicked based on the presence of a class for the two elements. Only the if section of the if...else in the .toggle function seems to be working. The drawer opens but then does not close on subsequent clicks of the trigger element, though the class will still successfully be changed back and forth by clicking the trigger element.

What am I missing here? Thanks.

javascript with jquery

    var container = document.getElementById('container');

    container.widthOpen = '800px';
    container.widthClosed = '210px';

    container.isOpen = function() {
      return this.classList.contains('open');
    };

    container.toggle = function() {
      this.classList.toggle('open');
      if (this.isOpen) {
        $(this).animate({
          width: container.widthOpen
        });
      } else {
        $(this).animate({
          width: container.widthClosed
        });
      }
    };

    var drawer = document.getElementById('drawer');

    drawer.widthOpen = '600px';
    drawer.widthClosed = '10px';

    drawer.isOpen = function() {
      return this.classList.contains('open');
    };

    drawer.toggle = function() {
      this.classList.toggle('open');
      if (this.isOpen) {
        $(this).animate({
          width: drawer.widthOpen
        });
      } else {
        $(this).animate({
          width: drawer.widthClosed
        });
      }
    };

    $('#toggle').click(function() {
      drawer.toggle();
      container.toggle();
    });

html

    <div id="container">
      <section id="main">
        <p id="static">
          This should be static.
        </p>
      </section>
      <section id="drawer">
        <div id="wrapper">
          <blockquote id="filler-text" cite="http://genius.com/The-pharcyde-passin-me-by-lyrics/">
            <p>Now in my younger days I used to sport a shag</p>
            <p>When I went to school I carried lunch in a bag</p>
            <p>With an apple for my teacher cause I knew I'd get a kiss</p>
            <p>Always got mad when the class was dismissed</p>
            <footer>
              -
              <cite>
                <a href="http://genius.com/The-pharcyde-passin-me-by-lyrics/">
                  The Pharcyde
                </a>
              </cite>
            </footer>
          </blockquote>
        </div>
      </section>
      <a href="#0" id="toggle">
        Toggle right-side section open/closed
      </a>
    </div>

css

    @import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300);

    *
      {
        box-sizing: border-box;
        margin:     0;
        padding:    0;
      }

    #container
      {
        font:        300 1rem/1 'Roboto Slab', sans-serif;
        color:       white;
        background:  grey;
        width:       210px;
        height:      339px;
        position:    fixed;
        left:        50%;
        top:         50%;
        transform:   translate(-50%, -50%);
        box-shadow:  0 19px 38px rgba(0,0,0,0.3),
                     0 15px 12px rgba(0,0,0,0.22);
      }

    #main, #drawer
      {
        float:       left;
      }

    #main
      {
        background:  #3377bb;
        width:       200px;
        height:      339px;
      }

    #main p
      {
        text-align: center;
        margin:     150px auto;
      }

    #drawer
      {
        background:  crimson;
        width:       10px;
        height:      339px;
        overflow:    hidden;
      }

    #wrapper
      {
        width:       600px;
        float:       right;
      }

    blockquote
      {
        line-height: 1.5em;
        width:       450px;
        margin:      100px auto;
      }

    #toggle
      {
        float:        left;
        display:      block;
        width:        100%;
        margin:       50px auto;
        text-align:   center;
      }
danielnixon
  • 4,178
  • 1
  • 27
  • 39
tjfwalker
  • 494
  • 3
  • 18

1 Answers1

6
 if (this.isOpen) {

this.isOpen is a function. That makes the condition true as long as the function exists at all (which it does).

this.isOpen() would be the return value of calling that function.

Thilo
  • 257,207
  • 101
  • 511
  • 656