Sarah James Sarah James - 6 months ago 10
Javascript Question

jQuery UI accordion not working nested div

jQuery accordion doesn't seem to work very well with nested div jsfiddle (click on the load button)

In the javascript I have added a select for the header element "h3"

$( "#accordion" ).accordion({
header: "h3",
icons: icons,
});


Full Javascript:

function simplate2(data, template) {
return data.map(function(e) {
return template.replace(/\{\{(\S+)\}\}/g, function(match, p1) {
return e[p1]
});
}).join(' ');
}

var test101 = $('#test101'),
query = {
bid: 0815,
f: 'FethStripeCard'
},
template = $('#template').html(),
icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};

$(document).on('click', 'button', function() {
$.post("/echo/json/", query, function(d) {

var data = [{
"id": "card_187wcdHV08ug7",
"type": "Visa",
"cardno": "**** 4242",
"exp_month": 6,
"exp_year": 2019
}, {
"id": "card_189KaFH",
"type": "MasterCard",
"cardno": "**** 4444",
"exp_month": 5,
"exp_year": 2017
},{
"id": "card_187wcdHV08ug7",
"type": "Visa",
"cardno": "**** 4242",
"exp_month": 6,
"exp_year": 2019
},];

test101.html(simplate2(data, template))
/*.accordion({
icons: icons
});
*/
});

$( "#accordion" ).accordion({
header: "h3",
icons: icons,

});
});


HTML

<div id="accordion">
<div id="test101">
<div id="template">

<h3>{{type}} {{cardno}} exp{{exp_month}} / {{exp_year}}</h3>
<div id="savedcard1-option">
<div class="control-group">
<form>
<p class="card-type Visa card-type-amex"> {{type}} (Fee $0.20)</p>
<input data-saved-card-id="{{id}}" type="hidden" class="addItemPo">
<div class="controls">

<button type="submit" class="stripe-button-el">Place my order</button>
</div>
</form>
</div>

</div>
</div>
</div>
<div id="NewCardContainer">
<h3>Pay with debit or credit card </h3>

<form>

<p class="card-type card-type-amex"> <span style="display:none">
<span class="card-name"></span> (Fee £<span id="NewCardFee"></span>)</span>
</p>
<div class="control-group">
<label for="NewCardNumber" class="control-label">Card Number</label>
<div class="controls">
<input autocomplete="off" class="text text-large input-large" data-val="true" data-val-cardtypemustbevalid="Invalid card type" data-val-regex="Your card number must be 12-19 digits and cannot contain spaces" data-val-regex-pattern="^(\d{12,19})$" data-val-required="Card number is required"
id="NewCardNumber" maxlength="19" name="card_accountNumber" placeholder="" required="required" title="Card Number" type="tel" value="">
<span class="field-validation-valid" data-valmsg-for="card_accountNumber" data-valmsg-replace="true"></span>
<div class="control-info">

<input id="SaveCardCheckbox" type="checkbox" title="Save my card for quicker reordering" checked="">
<label for="SaveCardCheckbox">Save my card for quicker reordering</label>

</div>
</div>
</div>
</form>

</div>
</div>

<button>Load</button>


This seem to ignore the first 3 generated
h3
tag and attach his classes to the
h3
tag wrapper with the
NewCardContainer
div

The issue I am having is getting it to work for the other
h3
tag so that when the user clicks on the card info it will slide down nicely has shown in the jQuery-ui accordion example code

Answer

If you keep it simple and follow the docs, stuff works. Accordion should contain only <h3> (or other headers) followed by the content for that header. That's it.

Jsfiddle: https://jsfiddle.net/07w55tyj/11/ Or view here:

function simplate2(data, template) {
  return data.map(function(e) {
    return template.replace(/\{\{(\S+)\}\}/g, function(match, p1) {
      return e[p1]
    });
  }).join(' ');
}

var template = $('#template').html(),
  icons = {
    header: "ui-icon-circle-arrow-e",
    activeHeader: "ui-icon-circle-arrow-s"
  };

var data = [{
  "id": "card_187wcdHV08ug7",
  "type": "Visa",
  "cardno": "**** 4242",
  "exp_month": 6,
  "exp_year": 2019,
  "fee": 0.50
}, {
  "id": "card_189KaFH",
  "type": "MasterCard",
  "cardno": "**** 4444",
  "exp_month": 5,
  "exp_year": 2017,
  "fee": 0.50
}, {
  "id": "card_187wcdHV08ug7",
  "type": "Visa",
  "cardno": "**** 4242",
  "exp_month": 6,
  "exp_year": 2019,
  "fee": 0.50
}, ];

$('#accordion').prepend(simplate2(data, template))

$("#accordion").accordion({
  header: "h3",
  icons: icons,

});
#template {
  display: none
}
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div id="template">
  <h3>{{type}} {{cardno}} exp{{exp_month}} / {{exp_year}}</h3>
  <div id="savedcard1-option">
    <div class="control-group">
      <form>
        <p class="card-type Visa card-type-amex"> {{type}} (Fee $0.20)</p>
        <input data-saved-card-id="{{id}}" type="hidden" class="addItemPo">
        <div class="controls">

          <button type="submit" class="stripe-button-el">Place my order</button>
        </div>
      </form>
    </div>

  </div>
</div>

<div id="accordion">
  <h3>Pay with debit or credit card </h3>

  <form>

    <p class="card-type card-type-amex"> <span style="display:none">
     <span class="card-name"></span> (Fee £<span id="NewCardFee"></span>)</span>
    </p>
    <div class="control-group">
      <label for="NewCardNumber" class="control-label">Card Number</label>
      <div class="controls">
        <input autocomplete="off" class="text text-large input-large" data-val="true" data-val-cardtypemustbevalid="Invalid card type" data-val-regex="Your card number must be 12-19 digits and cannot contain spaces" data-val-regex-pattern="^(\d{12,19})$" data-val-required="Card number is required"
        id="NewCardNumber" maxlength="19" name="card_accountNumber" placeholder="" required="required" title="Card Number" type="tel" value="">
        <span class="field-validation-valid" data-valmsg-for="card_accountNumber" data-valmsg-replace="true"></span>
        <div class="control-info">

          <input id="SaveCardCheckbox" type="checkbox" title="Save my card for quicker reordering" checked="">
          <label for="SaveCardCheckbox">Save my card for quicker reordering</label>

        </div>
      </div>
    </div>
  </form>

</div>