Question

My scenario is as follows. I have 7 tabs (one for each day) using bootstrap. I would like to have all 7 days worth of information loaded upon pageload.

<ul class='nav nav-tbs'>
  <li><a id='monday'>Monday</a></li>
  <li><a id='tuesday'>Tuesday</a></li>
  <li><a id='wednesday'>Wednesday</a></li>
  <li><a id='thursday'>Thursday</a></li>
  <li><a id='friday'>Friday</a></li>
  <li><a id='saturday'>Saturday</a></li>
  <li><a id='sunday'>Sunday</a></li>
</ul>

Idealy, upon clicking a days tab you’re only shown that days information. Each ‘daily page’ is fairly complex.

<div class='row'>
  <div class='span12'>
    <legend>Breakfast</legend>
  </div>
</div>

<div class='row'>
  <div class='span5 bfood'>
    <h3>{{ bname }}</h3>
    <img src='{{bimg }}'>
    <ul>
      {% for ing in bing %}
      <li>{{ ing }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class='span6'>
    <div class='well'>
      <form>
        {{ csrf_token }}
        <h2>Doesn't sound good?</h2>
        <p>
        <h3>Breakfast Food:</h3>
        <input type='text' value='{{ bfood }}' id='bfood'>
        </p>
        <p>
        <h3>Breakfast Required:</h3>
        {% for breq in br %}
        <div class='input-append'>
          <input type='text' name='br' value='{{ breq }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endfor %}
        <button class='btn btn-success add' id='br'><i class='icon-plus'></i></button>
        </p>
        <p>
        <h3>Breakfast Forbidden:</h3>
        {% for bfor in bf %}
        {% if bfor != '' %}
        <div class='input-append'>
          <input type='text' name='bf' value='{{ bfor }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endif %}
        {% endfor %}
        <button class='btn btn-success add' id='bf'><i class='icon-plus'></i></button>
        </p>
        <button class='btn new-recipe' id='b'>Try again</button>
        <div id='result'></div>
      </form>
    </div>
  </div>
</div>
<div class='row'>
  <div class='span12'>
    <legend>Lunch</legend>
  </div>
</div>
<div class='row'>
  <div class='span5 lfood'>
    <h3>{{ lname }}</h3>
    <img src='{{ limg }}'>
    <ul>
      {% for ing in ling %}
      <li>{{ ing }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class='span6'>
    <div class='well'>
      <form>
        {{ csrf_token }}
        <h2>Doesn't sound good?</h2>
        <p>
        <h3>Lunch Food:</h3>
        <input type='text' value='{{ lfood }}' id='lfood'>
        </p>
        <p>
        <h3>Lunch Required:</h3>
        {% for lreq in lr %}
        <div class='input-append'>
          <input type='text' name='lr' value='{{ lreq }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endfor %}
        <button class='btn btn-success add' id='lr'><i class='icon-plus'></i></button>
        </p>
        <p>
        <h3>Lunch Forbidden:</h3>
        {% for lfor in lf %}
        {% if lfor != '' %}
        <div class='input-append'>
          <input type='text' name='lf' value='{{ lfor }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endif %}
        {% endfor %}
        <button class='btn btn-success add' id='lf'><i class='icon-plus'></i></button>
        </p>
        <button class='btn new-recipe' id='l'>Try again</button>
      </form>
    </div>
  </div>
</div>
<div class='row'>
  <div class='span12'>
    <legend>Dinner</legend>
  </div>
</div>
<div class='row'>
  <div class='span5 dfood'>
    <h3>{{ dname }}</h3>
    <img src='{{ dimg }}'>
    <ul>
      {% for ing in ding %}
      <li>{{ ing }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class='span6'>
    <div class='well'>
      <form>
        {{ csrf_token }}
        <h2>Doesn't sound good?</h2>
        <p>
        <h3>Dinner Food:</h3>
        <input type='text' value='{{ dfood }}' id='dfood'>
        </p>
        <p>
        <h3>Dinner Required:</h3>
        {% for dreq in dr %}
        <div class='input-append'>
          <input type='text' name='dr' value='{{ dreq }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endfor %}
        <button class='btn btn-success add' id='dr'><i class='icon-plus'></i></button>
        </p>
        <p>
        <h3>Dinner Forbidden:</h3>
        {% for dfor in df %}
        {% if dfor != '' %}
        <div class='input-append'>
          <input type='text' name='df' value='{{ dfor }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endif %}
        {% endfor %}
        <button class='btn btn-success add' id='df'><i class='icon-plus'></i></button>
        </p>
        <button class='btn new-recipe' id='d'>Try again</button>
        <div id='result'></div>
      </form>
    </div>
  </div>
</div>

What would be the best strategy to hide/show each of the above? As a side note, I’d also like to reduce the complexity of the ‘single’ page, as it’s rather long and has a lot of repeat stuff.

Answer 1

Wrap each bunch of day code in an element, like…

<div id="section_monday">
  //all code for monday
</div>

then use JQuery like so…

$(".nav nav-tbs").find("a").click(function(e){
   e.preventDefault();

   var id = "section_" + $(this).attr("id");

   $("#" + id).toggle();//will turn sections on/off with each click
});