Databases
StackOverflow2013
Postsdbo
POHide/Show Accordion based on javascript functions
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHide/Show Accordion based on javascript functions
    primarykey
    data
    text
    <p>I have an accordion with one panel I would like to only show if certain criteria are met. The panel id is "product-options". </p> <p>I have a couple javascript functions, one is to verify states from a dropdown (dropdown id="province") and the other is to verify age with a checkbox (checkbox id="age_verification"). The accordion panel "product-options" is activated with a header, id="BuyThis". </p> <p>What I would like is to only show the panel "product-options" when the states match the list. </p> <p>Here is my script as is: </p> <pre><code>&lt;script&gt; // Validates State is in list of allowed for wine shipping... function validateState() { // Confirms province is allowed for wine shipping var states = ["Alaska", "Arizona", "California", "Colorado", ""]; if ($.inArray($("#province").val(), states) &lt;0) { alert("Shipping gifts containing alcohol to this state is prohibited by law. Please choose another item."); return false; } alert("Item Available! Please choose your options."); return true; } // Validates age verification is checked... function validateAge() { if (!$('#age_verification').is(':checked')) { alert("Please verify you are 21 years of age or older."); return false; } return true; } &lt;/script&gt; </code></pre> <p>Corresponding HTML:</p> <pre><code>&lt;h3 id="BuyThis" onclick="return validateState();"&gt;&lt;button class="Button buyThisBtn"&gt;&lt;i class="icon-shopping-cart"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;Buy This!&lt;/button&gt;&lt;/h3&gt; &lt;div class="ProductContainer" id="product-options"&gt; &lt;form&gt; [BODY OF ACCORDION PANEL WITH A BUNCH OF IRRELEVANT CODE......] &lt;button id="addtocart" type="submit" class="Button" onclick="validateAge(); return validateState();"&gt;&lt;i class="icon-shopping-cart"&gt;&lt;/i&gt; ADD TO CART&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p>I tried incorporating the following to no avail: </p> <pre><code>$(function () { $("#buyThis").change(function () { if ($.inArray($("#province").val(), states) &lt;0) { alert("Shipping gifts containing alcohol to this state is prohibited by law. Please choose another item."); $("product-options").hide(); } $("product-options").show(); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsusan
    1. USsusan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIs your validateState function complete? It doesn't have a return true; for alternative cases.
      singulars
      1. POHide/Show Accordion based on javascript functions
      1. USveritasetratio
    2. CO@ veritasetratio~Sorry, I do have a return true, just accidentally omitted it. I edited the post with the missing lines. Thank you!
      singulars
      1. POHide/Show Accordion based on javascript functions
      1. USsusan
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload