CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3121782
user3121782

Reputation: 159

Scroll the content for each link from downward when clicked

I have fixed footer with some link. It could be seen here

Codepen Demo

HTML:

 <li class="active"><a href="#">What is Facebook?</a></li>
                        <li><a href="#about">How does it work?</a></li>
                        <li><a href="#contact">Feedback</a></li>
                        <li><a href="#contact">Contact us</a></li>

There few links in footer, like What is facebook?. When user click on this link content of that page should appear from bottom of the page. Similar for each link.

How this thing is possible?

Upvotes: 1

Views: 61

Answers (1)

M a m a D
M a m a D

Reputation: 2139

for the sake of simplicity load the content of the link and set display:none, when the user clicks on the link set display:block. like this 

 <ul class="active"><a href="#">What is Facebook?</a></li>
      <li><a href="#about">How does it work?</a>
           <div id="aboutus_content" style="display:none"><?php include 'about-us.php' ?></div>
      </li>
      <li><a href="#contact">Feedback</a>
           <div id="contactus_content" style="display:none"><?php include 'contact-us.php' ?></div>
      </li>
      <li><a href="#contact">Contact us</a>
           <div id="contactus_content" style="display:none"><?php include 'contact-us.php' ?></div>
      </li> 
</ul>

this jquery function will work

$(function(){
    $(ul li).on(click,function(){
        if($(this).css("display")=="block")
                    ;//do nothing
         else
         {
               //find which li display is block (by its ID), set it to none and set current li display to block.
         }
    });
});

Upvotes: 1

Related Questions