BF Viejo Accordion Tips

by ataylor

HTML

<!-- start tips -->
<div id="tips">
    <h1>Noisy Pipes</h1>
    <p>Pipe noises range from loud hammering sounds to high-pitched squeaks. The causes may be loose pipes, water logged air chambers, or water pressure that's too high. Anchoring exposed pipes is a simple solution; other remedies such as anchoring pipes concealed inside walls, floors or ceilings, may call for a professional.</p>
    <h3>For Banging Pipes</h3>
    <!-- start box -->
    <div class="box">
        <p>Pipes are usually anchored with pipe straps every 6 to 8 feet for horizontal runs, 8 to 10 feet for vertical.</p>
        <ul>
              <li>If your pipes bang when you turn on the water, you may need to add straps, cushion the pipes with a rubber blanket, or both.</li>
              <li>When you anchor a pipe-especially a plastic one-leave room for expansion. </li>
              <li>Don't use galvanized straps on copper pipes.</li>
            </ul>
    </div>
    <!-- end box -->
    <h3>For Squeaking Pipes</h3>
    <!-- start box -->
    <div class="box">
    <p>Only hot water pipes squeak. As the pipe expands, it moves in its strap, and friction against a piece of wood causes the squeak.</p>
    <p><strong>Solution: </strong>Find where pipe is touching any wood and correct by isolating pipe from wood.</p>
     </div>
    <!-- end box -->
    <h3>For Water Hammer</h3>
    <!-- start box -->
    <div class="box">
        <p>This noise occurs when you turn off the water at a faucet or an appliance quickly. The water flowing through the pipes slams to a stop, causing a hammering noise.</p>
        <p><strong>Solution: </strong>Check for: loose washers in hose bibs, toilet fill valves, angle stops and laundry valves. Any quick closing valve can cause water hammer. You may want to Call Benjamin Franklin Plumbing for this.</p>
    </div>
    <!-- end box -->
    <h1>Toilet Advice</h1>
    <h3>Leaking Toilet</h3>
    <!-- start box -->
    <div class="box">
        <p>To stop a leak between...

CSS

#tips h3 {color:#A8871F; font-size:18px; font-weight:bold; margin:10px 0 0 0;}
#tips h1 {margin:20px 0 0 0; font-size:20px; font-weight:bold; color:#065697;}
#tips .box {background:#0154A2; color:#fff;}
strong {font-weight:bold;}

JavaScript

var headings = $('#tips h3'),
    boxes = $('#tips div.box');
boxes.hide();
headings.click(function() {
    $(this).siblings('div.box').slideUp(); //hide all the boxes
    $(this).next('div.box').slideDown(); //get the box after the clicked header and show it
})