Accordion Mess!

Something went whack. I didn't do it. ;)

by Rynne Cowham

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="wrapper">
    <div class="accordionstyle" id="accordion" style="margin-top:50px;">
         <h5 style="background:#73C7F2;text-align:center;" class="topbit"><p class="show">Click here to show Single links</p><p class="hide">Click here to hide split links</p></h5>
        <div>
        <div style="width:45%;height:40px;background:#ccc;float:left;margin-right:20px;border-radius:5px;padding:20px; padding-bottom:0;">
            <a href="#">Single Link Sample</a>
          </div>
        </div>
    </div>
</div>
<div class="cloner">
    <button class="cloner">Clone me!</button>
</div>

CSS

#wrapper {
    text-align:left;
    width:480px;
}
.ui-accordion-header-icon.ui-icon {
    display:none;
}
.ui-accordion-content a, *[id*='accordion-'] a {
    border:none;
    text-decoration:none;
}
.accordionstyle .ui-accordion-content {
    border:none;
}
.hide {
    display:none;
}
.cloner {
    text-align:left;
    margin:20px;
}
.cloner button {
    padding:10px;
    background-color:#efefef;
    font-size:1rem;
    font-weight:bold;
}

JavaScript

$(function () {
    $("#accordion").accordion({
        topbit: "h5",
        collapsible: true,
        active: false
    });
});

$(function () {
    $("#accordiontwo").accordion({
        topbittwo: "h5",
        collapsible: true,
        active: false
    });
});

$(".topbit").click(function () {
    $(".hide").toggle();
    $(".show").toggle();
});

// cloning to demonstrate reusability //
var i = 1;
$('button.cloner').click(function () {
    var $clone = $(".accordionstyle:first").clone(true);
    $clone.find('form').each(function () {
        $(this).attr('id', function (_, id) {
            return this.id + '-' + i;
        });
    });
    $clone.attr('id', function () {
        return this.id + '-' + i;
    }).appendTo('#wrapper');
    i = i + 1;
});