Databases
StackOverflow2013
Postsdbo
POShow hide divs using animate function
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShow hide divs using animate function
    primarykey
    data
    text
    <p>Hello I am trying to animate few divs from the bottom of a page, when user clicks on certain links.</p> <p>E.g is a link that says 'About' is clicked on, I need that div to slide up from the bottom to a certain height. But if another link E.g. "Contact" is clicked, I want the contact div to slide up from the bottom and simultaneously the other div has to slide down. I have started learning jquery and hasn't got much knowledge.. However this is what i have tried.. But couldnt get the way it was intended.</p> <p>The Div slides up on Click, but not sliding down when the other link is clicked. I require only the clicked div to be visible at a time and rest all the div has to either slide down or hide </p> <pre><code>&lt;script&gt; $(document).ready (function() { $('#ab').click (function() { $('#about').show().animate({marginTop:'-360px'}); }); $('#con').click (function() { $('#contact').show().animate({marginTop:'-360px'}); }); }); &lt;/script&gt; </code></pre> <p>and here is the CSS</p> <pre class="lang-css prettyprint-override"><code>#about {width:auto; background-color:#333333; height:360px; position:relative; display:none;} #contact {width:auto; background-color:#FF3300; height:360px; position:relative; display:none;} </code></pre> <p>HTML goes here</p> <pre><code>&lt;ul class="menu"&gt; &lt;li&gt;&lt;a id="ab" href="#"&gt;About &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="con" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="maindiv"&gt; &lt;div id="about"&gt;About&lt;/div&gt; &lt;div id="contact"&gt;Contact&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Any help is much appreciated.. Thanks</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGops
    1. USGops
    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. CO"couldnt get the way it was intended." Please be specific. What incorrect thing happens when you run your code?
      singulars
      1. POShow hide divs using animate function
      1. USGeorge Cummins
    2. COThe Div slides up on Click, but not sliding down when the other link is clicked. I require only the clicked div to be visible at a time and rest all the div has to either slide down or hide
      singulars
      1. POShow hide divs using animate function
      1. USGops
    3. COPlease post the HTML markup also..
      singulars
      1. POShow hide divs using animate function
      1. USpalaѕн
 

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