Response title
This is preview!
Move this topic
slideDown
in Using jQuery
•
12 years ago
I'm looking to replicate a similar design as the search box located on this website:
http://www.doctordirectory.com/findadoctor/
I'm not very skilled in jquery at all, but I was curious if this is possible to do in jquery. If so, would slideDown be the best way to execute this?
http://www.doctordirectory.com/findadoctor/
I'm not very skilled in jquery at all, but I was curious if this is possible to do in jquery. If so, would slideDown be the best way to execute this?
1
Replies(3)
Re: slideDown
12 years ago
It's certainly possible. You might want to use slideToggle instead to open/close on alternate clicks.
- $('h4').click(function() {
- $(this).next().slideToggle();
- });
Re: Re: slideDown
12 years ago
Ah, I see. I have attempted to write the code, but it just doesn't seem to be working properly. Did I do something wrong?
- <link rel="StyleSheet" href="hmg.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="hmg_provider_search">
<h2>How do you want to search?</h2>
<div id="click_name">
<div id="hmg_provider_search_name">
<h3>· By Healthcare Provider's Last Name</h3>
</div>
<div id="hmg_provider_search_name_more">
<div class="hmg_provider_search_inputcontainer"><label>Last Name:</label> <input id="lastname" name="lastname" value="Minimum 2 letters" /></div>
</div>
<div class="clearfix"></div>
</div>
<!-- end #hmg_provider_search_name -->
<div id="hmg_provider_search_specialty">
<h3><a href="#">· By Specialty</a></h3>
<div id="hmg_provider_search_specialty_more">
<table border="0">
<tbody>
<tr>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
</tr>
<tr>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
</tr>
<tr>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
</tr>
<tr>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
<td><input name="specialty" type="radio" value="cardiology" /></td>
<td>Cardiology</td>
</tr>
</tbody>
</table>
<select> <option>Please Choose</option> <option>Anesthesiology</option> <option>Cardiac, Vascular and Thoracic Surgery</option> <option>Cardiology</option> <option>Dermatology</option> <option>Electrophysiology</option> <option>Emergency Medicine</option> <option>Family Practice</option> <option>Gastroenterology</option> <option>Geriatrics</option> <option>Gynecology</option> <option>Hospitalist</option> <option>Internal Medicine</option> <option>Nephrology</option> <option>Neurology</option> <option>Neuropsychology</option> <option>Neurosurgery</option> <option>Obstetrics and Gynecology</option> <option>Occupational Medicine</option> <option>Oncology (Medical/Hematology)</option> <option>Oncology (Radiation)</option> <option>Ophthalmology</option> <option>Orthopedics</option> <option>Otolaryngology (OFSC)</option> <option>Pain Management (Anesthesiology)</option> <option>Pediatrics</option> <option>Plastic Surgery</option> <option>Podiatry</option> <option>Psychiatry</option> <option>Psychology</option> <option>Pulmonary Medicine</option> <option>Radiology</option> <option>Sports Medicine</option> <option>Surgery, General, Bariatric, Thoracic and Vascular</option> <option>Urology</option> </select></div>
</div>
<!-- end #hmg_provider_search_specialty -->
<div id="hmg_provider_search_clinic">
<h3><a href="#">· By Clinic</a></h3>
<div id="hmg_provider_search_clinic_more"><select> <option>Please Choose</option> <option>Advanced Orthopaedics</option> <option>Foot Care Center</option> <select></div>
</div>
<!-- end #hmg_provider_search_clinic -->
<div id="hmg_provider_search_all">
<h3><a href="#">· All of the Above</a></h3>
<div id="hmg_provider_search_all_more"></div>
</div>
<!-- end #hmg_provider_search_all --> <input id="hmg_provider_search_submit" type="submit" value="SEARCH" /></div>
<!-- end #hmg_provider_search -->
<script type="text/javascript">// <![CDATA[
$('#h3').click(function() {
$('#hmg_provider_search_specialty_more').next().slideToggle();
});
// ]]></script>
Leave a comment on kbwood.au's reply
Re: slideDown
12 years ago
Several things are wrong.
* Your HTML needs to be consistent. Some h3's are within their own div, with their content in a separate div, while others are siblings to their content. You need the latter with the code originally provided.
* Some h3's contain anchors which will receive the click event and probably go to the top of the page.
* The select #h3 looks for an element with an ID of h3, whereas you want to select all h3 elements. Use the original code, changing h4 to h3.
* You have hard-coded a content div to slide out (#hmg_provider_search_specialty_more), rather than using the one relative to the currently clicked header. Use the original code that references this.
* Your HTML needs to be consistent. Some h3's are within their own div, with their content in a separate div, while others are siblings to their content. You need the latter with the code originally provided.
* Some h3's contain anchors which will receive the click event and probably go to the top of the page.
* The select #h3 looks for an element with an ID of h3, whereas you want to select all h3 elements. Use the original code, changing h4 to h3.
* You have hard-coded a content div to slide out (#hmg_provider_search_specialty_more), rather than using the one relative to the currently clicked header. Use the original code that references this.
Leave a comment on kbwood.au's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to wurzel86's question
Statistics
- 3 Replies
- 1446 Views
- 0 Followers