Databases
StackOverflow2013
Postsdbo
POSection not hidden on page load
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSection not hidden on page load
    text
    copied!<p>When I load my page I should only see the drop down menu but instead I am seeing my newwebsite Section. What could be causing it to show?</p> <p><strong>HTML:</strong></p> <p><strong>JS:</strong></p> <pre><code>$(function() { $('#requiredOption').change(function() { var divToHide = "#" + $(this).val() + "Section"; $(divToHide).show() .siblings('#newwebsiteSection, #websiteredevelopmentSection, #otherSection') .hide(); }); }); &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Template 2011&lt;/title&gt; &lt;link rel="stylesheet" href="_assets/css/style.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;div id="logo"&gt;Template Here&lt;/div&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="quote.html"&gt;Free Quote&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Showcase&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact Me&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; &lt;section id="content"&gt; &lt;h1&gt;Free Quote&lt;/h1&gt; &lt;p&gt;Please fill out the below questionnaire to receive your free web development quote&lt;/p&gt; &lt;form action="" method="post" accept-charset="utf-8"&gt; &lt;select name="requiredOption" id="requiredOption"&gt; &lt;option id="pleaseselect" value="pleaseselect"&gt;Please Select Your Required Quote&lt;/option&gt; &lt;option id="newwebsite" value="newwebsite"&gt;New Website&lt;/option&gt; &lt;option id="websiteredevelopment" value="websiteredevelopment"&gt;Website Redevelopment&lt;/option&gt; &lt;option id="other" value="other"&gt;Other&lt;/option&gt; &lt;/select&gt; &lt;/form&gt; &lt;section id="newwebsiteSection"&gt; &lt;form action="" id="newwebsiteForm" method="get" accept-charset="utf-8"&gt; &lt;fieldset&gt; &lt;div&gt;&lt;label&gt;Do You Require Hosting?&lt;/label&gt;&lt;input type="radio" name="Yes" value="Yes"&gt;Yes&lt;/input&gt;&lt;input type="radio" name="No" value="No"&gt;No&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Do You Require A Domain?&lt;/label&gt;&lt;input type="radio" name="Yes" value="Yes"&gt;Yes&lt;/input&gt;&lt;input type="radio" name="No" value="No"&gt;No&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Do You Have A Logo?&lt;/label&gt;&lt;input type="radio" name="Yes" value="Yes"&gt;Yes&lt;/input&gt;&lt;input type="radio" name="No" value="No"&gt;No&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;What is your Domain?&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="url" name="domain" value="http://example.com"&gt;&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Type of site Required?&lt;label&gt;&lt;/div&gt; &lt;div&gt; &lt;select name="newwebsiteType" id="newwebsiteType"&gt; &lt;option value="shoppingCart"&gt;Shopping Cart&lt;/option&gt; &lt;option value="CMS"&gt;Content Management System&lt;/option&gt; &lt;option value="static"&gt;Static Website&lt;/option&gt; &lt;option value="otherDevelopment"&gt;Other Development&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div&gt;&lt;label&gt;Do You Require A Design?&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="radio" name="Yes" value="Yes"&gt;Yes&lt;/input&gt;&lt;input type="radio" name="No" value="No"&gt;No&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Three Favorite colors?&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;input name="color1" value=""&gt;&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;input name="color2" value=""&gt;&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;input name="color3" value=""&gt;&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;What are your favorite websites?&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="text" name="fav1" value=""&gt;&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="text" name="fav2" value=""&gt;&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="text" name="fav3" value=""&gt;&lt;/input&gt;&lt;/div&gt; &lt;div&gt;&lt;label&gt;Comments?&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;textarea name="comments" id="comments"&gt;&lt;/textarea&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="submit" name="submit" value="Send Quote Request"&gt;&lt;/div&gt; &lt;/form&gt; &lt;/section&gt; &lt;section id="websiteredevelopmentSection"&gt; &lt;p&gt;Website Redevelopment&lt;/p&gt; &lt;/section&gt; &lt;section id="otherSection"&gt; &lt;p&gt;Other&lt;/p&gt; &lt;/section&gt; &lt;/section&gt; &lt;section id="sidebar"&gt; &lt;div id="box_one"&gt; &lt;p&gt;Box One&lt;/p&gt; &lt;/div&gt; &lt;div id="box_two"&gt; &lt;p&gt;Box Two&lt;/p&gt; &lt;/div&gt; &lt;div id="box_three"&gt; &lt;p&gt;Box Three&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;footer&gt; &lt;p&gt;This is the footer&lt;/p&gt; &lt;/footer&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="_assets/js/js.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/body&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>/* Quote Page */˝ #newwebsiteSection, #websiteredevelopmentSection, #otherSection{ display:none; } #newwebsiteForm fieldset{ width:600px; margin:0 auto; } #newwebsiteForm input { display:inline; border:1px solid #444; border-top-color:#333; background-color: #222; /* IE */ background-color: rgba(0, 0, 0, 0.3); margin: 20px 0 0 0; padding: 2px 9px 2px 9px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; width:250px; height:28px; color: #989898; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #newwebsiteForm input:hover { border-color:#4C4C4C; border-top-color:#343434; } #newwebsiteForm input:focus { box-shadow: 0px 0px 3px #555; border-color:#4C4C4C; border-top-color:#343434; } #newwebsiteForm textarea { display:inline; border:1px solid #444; border-top-color:#333; background-color: #222; /* IE */ background-color: rgba(0, 0, 0, 0.3); font-family: Verdana, Arial, Helvetica, sans-serif; margin:20px 0; padding: 4px 9px 4px 9px; font-size: 11px; width:250px; height:132px; color: #989898; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; resize:none; } #newwebsiteForm textarea:hover { border-color:#4C4C4C; border-top-color:#343434; } #newwebsiteForm textarea:focus { box-shadow: 0px 0px 3px #555; border-color:#4C4C4C; border-top-color:#343434; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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