CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user8115310
user8115310

Reputation:

Open footer element when other one is click

I struggle with an issue for my footer: I want my footer on the right bottom and fixed, little at first and expand to show the li elements when clicked on with a jquery function .on().

I tried with outsiding the div 'contact-us' but but nothing worked.

Here is a JS FIDDLE : https://jsfiddle.net/e2g1hwgu/

My HTML part: 

<footer>
    <section class="footer">
        <div class="contact-us"><b>Contact us!</b>

            <ul class="contactusshow">
                <li> Our mail : [email protected] </li>
                <li> Phone : 00 00 00 00 00</li>
                <li> Address: everywhere! </li>
            </ul>
        </div>
    </section>
</footer>

My CSS part: 

 footer{
  position:fixed;
  bottom: 5px;
  right: 10px;
}
.footer{}

.contact-us:hover{
  background: #A26161;
  text-decoration: none;
}
.contact-us{
  background-color: #8B0000;
  color: #fff;
  padding: 5px 5px 5px 5px;
  border-radius: 2px 2px 2px 2px;
  display: flex;
  right:0%;
}
.contactusshow{
  background-color: #8B0000;
  color:#fff;
  display: none;
}

And the JS part: 

jQuery(function($){
 $('.contact-us').on('click' function() {
    $(this).find('.contactusshow').slideToggle();
  });

 });

Have you some clue ?

Thanks !

Upvotes: 0

Views: 278

Answers (1)

Alex Mac
Alex Mac

Reputation: 2993

Please check below. This will help you.

jQuery(function($){
 $('.contact-us').on('click', function() {
    $(this).find('.contactusshow').slideToggle();
  });

 });
footer{
  position:fixed;
  bottom: 5px;
  right: 10px;
}
.footer{}

.contact-us:hover{
  background: #A26161;
  text-decoration: none;
}
.contact-us{
  background-color: #8B0000;
  color: #fff;
  padding: 5px 5px 5px 5px;
  border-radius: 2px 2px 2px 2px;
  display: flex;
  right:0%;
}
.contactusshow{
  background-color: #8B0000;
  color:#fff;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
<section class="footer">
  <div class="contact-us"><b>Contact us!</b>

  <ul class="contactusshow">
      <li> Our mail : [email protected] </li>
      <li> Phone : 00 00 00 00 00</li>
      <li> Address: everywhere! </li>
  </ul>
</div>

Let me know if you have any other specific requirement,

Upvotes: 1

Related Questions