Databases
StackOverflow2013
Postsdbo
POJQuery accordion keeps moving to top of the page on click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery accordion keeps moving to top of the page on click
    primarykey
    data
    text
    <p>I created a simple JQuery accordion at the top of my page in html, the problem is that everytime i click a box to slide down the page moves to the very top again. I dont get why this would even happen and have spent countless hours determining if its a css issue or JQuery.</p> <p>Im a JQuery noob so im not sure if there is a specific control to fix this or not.</p> <p>I will provide my code (there is also a content slider on the page):</p> <p><strong>CSS</strong></p> <pre><code>.clear { clear:both; } body { background: #0B0909; min-height: 200px; } .wrap { width:940px; padding:10px; margin:50px auto; font-family: Arial, Helvetica, Times; /* border: 3px ridge #FFDA00; */ } .header { background: #0B0909; color:#fff; padding: 25px; font-family: 'Special Elite', Arial, serif; font-weight: 400; text-align: center; } .sliderFade { position:relative; width:940px; height: 300px; } .sliderFade img { position:absolute; left:0; top:0; border: 5px solid #FFDA00; width:930px; height: 295px; } #container1 { position:relative; width:940px; height: 200px; } dl, dt, dd, ul, li, a { margin: 0; padding: 0; } a { text-decoration: none; font-size: 20px; color: #0B0909; outline: none; font-family: 'Special Elite', Arial, serif; } li { padding-left: 2px; list-style-type: none; border-left: 3px solid #FFDA00; border-right: 3px solid #FFDA00; border-bottom: 3px solid #FFDA00; background-color: white; height: 200px; } dl { width: 300px; position:relative; } dt { padding-top: 4px; background-color: #FFDA00; border-left: 3px solid #FFDA00; border-right: 3px solid #FFDA00; border-bottom: 3px solid #CDCDCD; } dt a { color: #0B0909; font-size: 30px; font-family: 'Special Elite', Arial, serif; } .footer { background: #0B0909; color:#fff; padding: 25px; font: 0.8em, serif; height: 100px; border-top: 3px solid #FFDA00; } </code></pre> <p><strong>JQuery</strong></p> <blockquote> <pre><code> $(function() { //Hide all images except the first in content slider $('.sliderFade :gt(0)').hide(); setInterval(function() { $('.sliderFade img:first-child').fadeOut().next('img').fadeIn().end().appendTo('.sliderFade'); //$('#star').clone().animate({height:"30px"}).appendTo('.outside'); }, 4000); //hide all sub-windows on load $("dd:not(:first)").hide(); //slide the window up on click $("dt a").click(function() { $("dd").slideUp("slow"); $(this).parent("dt").next("dd").slideDown("normal"); }); }); </code></pre> </blockquote> <p><strong>HTML</strong></p> <pre><code>&lt;body&gt; &lt;div class="outside"&gt; &lt;img id= "star" src="star.png" height="10px" width="15px"&gt; &lt;/div&gt; &lt;div class="wrap"&gt; &lt;div class="header" &gt; &lt;h1&gt; My web app &lt;/h2&gt; &lt;/div&gt; &lt;div class="sliderFade"&gt; &lt;img id = "1stImage" src="space2.jpg"&gt; &lt;img id = "2ndImage" src="space.jpg"&gt; &lt;img id = "3rdImage" src="paint-types.jpg"&gt; &lt;/div&gt; &lt;div class="clear" /&gt; &lt;div id="container1"&gt; &lt;dl&gt; &lt;dt&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/dt&gt; &lt;dd&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/dd&gt; &lt;dt&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/dt&gt; &lt;dd&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/dd&gt; &lt;dt&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/dt&gt; &lt;dd&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; &lt;div class="footer"&gt; &lt;dt&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/dt&gt; &lt;dd&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/dd&gt; &lt;dt&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/dt&gt; &lt;dd&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/dd&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>thanks.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMaster Yoda
    1. USMaster Yoda
    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
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COwhat is the HTML
      singulars
      1. POJQuery accordion keeps moving to top of the page on click
      1. USKeith
    2. CO@Keith Hi Keith i have just updated the question with the HTML mark-up thanks for the reply. K.T
      singulars
      1. POJQuery accordion keeps moving to top of the page on click
      1. USMaster Yoda
 

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