Toggle a collection of target elements with a single control

Basic Example

This is a Thing!

This is a summary of the thing! If you click the title above, you get details.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a detailed report about the thing! Click the title above to collapse it to a summary.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at malesuada magna, vel tempus orci. Nullam in nisi et libero laoreet maximus. Mauris turpis felis, tempor a convallis ac, varius id ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla scelerisque lacinia accumsan. Duis auctor tellus in tempor interdum. In et arcu massa. Proin id orci mollis, dignissim dui vitae, aliquet mauris. Vivamus lobortis, erat eu tristique dapibus, elit velit gravida nunc, vitae suscipit nunc eros non erat. Etiam ut lectus ut libero dapibus egestas.

Hitcher Magic Number Auth
Bonanza Jellybean T.R.
Arthur Dent D.A. 
        
<div class="bse-toggle-that well" data-init_toggle="false">
    <div class="bse-toggle-that-target" style="display:none;">
        <button class="close bse-toggle-that-control" type="button" title="Cancel">×</button>
        Panel with close button
    </div>
    <div class="bse-toggle-that-target">
        <button class="open bse-toggle-that-control" type="button" title="Open">Open</button>
    </div>
</div>

<hr>

<div class="panel bse-toggle-that" data-init_toggle="false">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="bse-toggle-that-control"role="button">This is a Thing!</a>
      </h4>
    </div>
    <div class="panel-collapse collapse in bse-toggle-that-target">
        <div class="panel-body">
            <p>This is a summary of the thing!   If you click the title above, you get details.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
        </div>
    </div>
    <div class="panel-collapse collapse bse-toggle-that-target">
        <div class="panel-body">
            <p>This is a detailed report about the thing!   Click the title above to collapse it to a summary.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at malesuada magna, vel tempus orci. Nullam in nisi et libero laoreet maximus. Mauris turpis felis, tempor a convallis ac, varius id ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla scelerisque lacinia accumsan. Duis auctor tellus in tempor interdum. In et arcu massa. Proin id orci mollis, dignissim dui vitae, aliquet mauris. Vivamus lobortis, erat eu tristique dapibus, elit velit gravida nunc, vitae suscipit nunc eros non erat. Etiam ut lectus ut libero dapibus egestas.
            </p>
        </div>
    </div>
</div>

<hr>

<div class="bse-toggle-that">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>Hitcher</th>
            <th>Magic Number
                <span title="Edit Magic Number" class="bse-toggle-that-control">
                            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                        </span>
            </th>
            <th>Auth</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                Bonanza Jellybean
            </td>
            <td>
                <span class="bse-toggle-that-target" style="display: none;">66</span>
                <span class="bse-toggle-that-target">
                    <input value="66" type="number">
                </span>
            </td>
            <td>
                T.R.
            </td>
        </tr>
        <tr>
            <td>
                Arthur Dent
            </td>
            <td>
                <span class="bse-toggle-that-target" style="display: none;">42</span>
                <span class="bse-toggle-that-target">
                    <input value="42" type="number">
                </span>
            </td>
            <td>
                D.A.
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input class="bse-toggle-that-target btn btn-primary" value="Save">
            </td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>