CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user1673498
user1673498

Reputation: 431

Jquery toggle() follow border on navbar bootstrap

I have a Jquery toggle() function that is linked to the navbar. When the user clicks the toggle button, it displays new content under the navbar. I have applied a border-bottom to the navbar and the toggle class. I would like this border to follow the toggle as it expands. Is this possible?

I have made a Bootply to explain my point further.

Below is my Jquery

jQuery(document).ready(function($) {

$banner = $(".banner");
$banner.hide();
$(".show-banner").on("click", function() {
  if ($(".banner").is(":hidden")) {


               $("nav.navbar.navbar-inverse").attr('style', 'border-bottom: border-bottom:4px solid #ff0000;!important').delay( 5000 );

            } else {
                    $("nav.navbar.navbar-inverse").attr('style', 'border-bottom: border-bottom:4px solid #ff0000; !important').delay( 5000 );

            }
   $banner.slideToggle()

    $(".navbar-collapse.collapse").addClass("hide-all");


});

 });

Upvotes: 0

Views: 89

Answers (1)

Ren
Ren

Reputation: 1374

In the slideToggle() method you can place another function to perform an action at the completion of the animation. New bootply.

jQuery(document).ready(function($) {

    $banner = $(".banner");
    $banner.hide();
    $(".show-banner").on("click", function() {
      $("nav.navbar.navbar-inverse").attr('style', 'border-bottom: 4px solid #000 !important';).delay( 5000 );

      $banner.slideToggle(function(){
        if ($(".banner").is(":hidden")) {
          $("nav.navbar.navbar-inverse").attr('style', 'border-bottom: 4px solid #ff0000 !important;').delay( 5000 );
        }
      });

      $(".navbar-collapse.collapse").addClass("hide-all");

    });

  });

So what I'm doing is on click of the toggle button, immediately turn the original border of the navbar black as the banner animates out with the red border. If the banner is being closed, then restore the original border to red upon completion of closing.

There are probably other ways to do this but I think this accomplishes what you're after.

Upvotes: 1

Related Questions