Having trouble with the jQuery toggle functionality not working as expected

Question

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when the page loads

$(document).ready(function() {
  $('#cm_now').toggle(function() {
    $('.search_bx_ar').css({
      'opacity': '1'
    });
    $('.search_bx_ar').css({
      'height': '40px'
    });
  });
});

.search_bx_ar {
  position: relative;
  margin: 0 0 10px 0;
  width: 100%;
  opacity: 0;
  height: 0px;
  transition: ease-in-out all .5s;
  -webkit-transition: ease-in-out all .5s;
  -moz-transition: ease-in-out all .5s;
}

.compare_sr_btn {
  float: right;
  width: 25%;
  padding-left: 15px;
  margin: 15px 0 10px 0;
}

.compare_sr_btn>#cm_now {
  background-color: #2b7f7f;
  color: #fff;
  border: none;
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 12px;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compare_sr_btn">
  <input type="button" id="cm_now" value="Compare Now" />
</div>
<div class="search_bx_ar">
  <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search">
</div>

javascript jquery html css

Answer 1

Answer №1

Toggle isn't quite what you may have expected it to be. The purpose of Toggle is to either hide or display an element. By executing the function immediately upon page load, the button is promptly hidden with a smooth animation.

http://api.jquery.com/toggle/

Take a look at this code snippet to achieve the desired outcome:

var buttonState = 0;

$(document).ready(function() {
    $('#cm_now').click(function() {
        if(buttonState == 0) {
            $('.search_bx_ar').css({'opacity': '1'});
            $('.search_bx_ar').css({'height' : '40px'});
        } else {
            $('.search_bx_ar').css({'opacity': '0.5'});
            $('.search_bx_ar').css({'height' : '20px'});
        }
        buttonState = 1 - buttonState; //a smart way to toggle between 0 and 1
    });
});

.search_bx_ar {
    position: relative;
    margin: 0 0 10px 0;
    width: 100%;
    opacity: 0;
    height: 0px;
transition: ease-in-out all .5s;
-webkit-transition: ease-in-out all .5s;
-moz-transition: ease-in-out all .5s;
}
.compare_sr_btn {
    float: right;
    width: 25%;
    padding-left: 15px;
    margin: 15px 0 10px 0;
}

.compare_sr_btn > #cm_now {
    background-color: #2b7f7f;
    color: #fff;
    border: none;
    height: 40px;
    line-height: 40px;
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compare_sr_btn">
    <button id="cm_now">Compare Now</button>
</div>
<div class="search_bx_ar">
    <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search">
</div>

Answer 2

Toggle isn't quite what you may have expected it to be. The purpose of Toggle is to either hide or display an element. By executing the function immediately upon page load, the button is promptly hidden with a smooth animation.

http://api.jquery.com/toggle/

Take a look at this code snippet to achieve the desired outcome:

var buttonState = 0;

$(document).ready(function() {
    $('#cm_now').click(function() {
        if(buttonState == 0) {
            $('.search_bx_ar').css({'opacity': '1'});
            $('.search_bx_ar').css({'height' : '40px'});
        } else {
            $('.search_bx_ar').css({'opacity': '0.5'});
            $('.search_bx_ar').css({'height' : '20px'});
        }
        buttonState = 1 - buttonState; //a smart way to toggle between 0 and 1
    });
});

.search_bx_ar {
    position: relative;
    margin: 0 0 10px 0;
    width: 100%;
    opacity: 0;
    height: 0px;
transition: ease-in-out all .5s;
-webkit-transition: ease-in-out all .5s;
-moz-transition: ease-in-out all .5s;
}
.compare_sr_btn {
    float: right;
    width: 25%;
    padding-left: 15px;
    margin: 15px 0 10px 0;
}

.compare_sr_btn > #cm_now {
    background-color: #2b7f7f;
    color: #fff;
    border: none;
    height: 40px;
    line-height: 40px;
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compare_sr_btn">
    <button id="cm_now">Compare Now</button>
</div>
<div class="search_bx_ar">
    <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search">
</div>

Answer 3

Answer №2

$(".click_me").on("click", function() {
  $('.click_me').toggleClass("animate-click");
});

.box_to_animate {
  position: absolute;
  margin: 0 0 20px 0;
  width: 100%;
  opacity: 0;
  height: 0px;
  transition: ease-in-out all .6s;
}

.animation_button {
  float: right;
  width: 25%;
  padding-left: 15px;
  margin-top: 20px;
}

.click_me {
  background-color: #ff5733;
  color: #fff;
  border: none;
  height: 50px;
  line-height: 50px;
  width: 100%;
  font-size: 14px;
}
.animate-click {
    height: 30px;
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="animation_button">
          <button class="click_me" type="submit">Animate Now</button>
        </div>
        <div class="box_to_animate">
          <input class="form-control search_input" id="search_data" autocomplete="off" onkeyup="search();" type="text" placeholder="Type to Search">
        </div>

Answer 4

$(".click_me").on("click", function() {
  $('.click_me').toggleClass("animate-click");
});

.box_to_animate {
  position: absolute;
  margin: 0 0 20px 0;
  width: 100%;
  opacity: 0;
  height: 0px;
  transition: ease-in-out all .6s;
}

.animation_button {
  float: right;
  width: 25%;
  padding-left: 15px;
  margin-top: 20px;
}

.click_me {
  background-color: #ff5733;
  color: #fff;
  border: none;
  height: 50px;
  line-height: 50px;
  width: 100%;
  font-size: 14px;
}
.animate-click {
    height: 30px;
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="animation_button">
          <button class="click_me" type="submit">Animate Now</button>
        </div>
        <div class="box_to_animate">
          <input class="form-control search_input" id="search_data" autocomplete="off" onkeyup="search();" type="text" placeholder="Type to Search">
        </div>

Answer 5

Answer №3

You have neglected to attach a click handler to the toggle button. Instead, you are triggering the toggle function on document ready, which executes as soon as the DOM is loaded.

The toggle() method switches between hiding and showing the selected elements.

When using this method, it checks the visibility of the selected elements. If hidden, show() is executed; if visible, hide() is executed - resulting in a toggle effect.

SNIPPET

$(document).ready(function() {
  $('#cm_now').click(function() {

    $('#cm_now').toggle(function() {
      $('.search_bx_ar').css({
        'opacity': '1'
      });
      $('.search_bx_ar').css({
        'height': '40px'
      });
    });
  });
});

.search_bx_ar {
  position: relative;
  margin: 0 0 10px 0;
  width: 100%;
  opacity: 0;
  height: 0px;
  transition: ease-in-out all .5s;
}

.compare_sr_btn {
  float: right;
  width: 25%;
  padding-left: 15px;
  margin: 15px 0 10px 0;
}

.compare_sr_btn>#cm_now {
  background-color: #2b7f7f;
  color: #fff;
  border: none;
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 12px;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compare_sr_btn">
  <input type="button" id="cm_now" value="Compare Now" />
</div>
<div class="search_bx_ar">
  <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search">
</div>

Answer 6

You have neglected to attach a click handler to the toggle button. Instead, you are triggering the toggle function on document ready, which executes as soon as the DOM is loaded.

The toggle() method switches between hiding and showing the selected elements.

When using this method, it checks the visibility of the selected elements. If hidden, show() is executed; if visible, hide() is executed - resulting in a toggle effect.

SNIPPET

$(document).ready(function() {
  $('#cm_now').click(function() {

    $('#cm_now').toggle(function() {
      $('.search_bx_ar').css({
        'opacity': '1'
      });
      $('.search_bx_ar').css({
        'height': '40px'
      });
    });
  });
});

.search_bx_ar {
  position: relative;
  margin: 0 0 10px 0;
  width: 100%;
  opacity: 0;
  height: 0px;
  transition: ease-in-out all .5s;
}

.compare_sr_btn {
  float: right;
  width: 25%;
  padding-left: 15px;
  margin: 15px 0 10px 0;
}

.compare_sr_btn>#cm_now {
  background-color: #2b7f7f;
  color: #fff;
  border: none;
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 12px;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compare_sr_btn">
  <input type="button" id="cm_now" value="Compare Now" />
</div>
<div class="search_bx_ar">
  <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search">
</div>

Answer 7

Answer №4

You have the option to toggle your button when it is clicked, otherwise it will toggle and disappear after the document is ready.

$(document).ready(function() {
$("#cm_now").on("click", function() {
  $(this).toggle(function() {
    $('.search_bx_ar').css({
      'opacity': '1'
    });
    $('.search_bx_ar').css({
      'height': '40px'
    });
  });
  });
});

.search_bx_ar {
  position: relative;
  margin: 0 0 10px 0;
  width: 100%;
  opacity: 0;
  height: 0px;
  transition: ease-in-out all .5s;
  -webkit-transition: ease-in-out all .5s;
  -moz-transition: ease-in-out all .5s;
}

.compare_sr_btn {
  float: right;
  width: 25%;
  padding-left: 15px;
  margin: 15px 0 10px 0;
}

.compare_sr_btn>#cm_now {
  background-color: #2b7f7f;
  color: #fff;
  border: none;
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 12px;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compare_sr_btn">
  <input type="button" id="cm_now" value="Compare Now" />
</div>
<div class="search_bx_ar">
  <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search">
</div>

Answer 8

You have the option to toggle your button when it is clicked, otherwise it will toggle and disappear after the document is ready.

$(document).ready(function() {
$("#cm_now").on("click", function() {
  $(this).toggle(function() {
    $('.search_bx_ar').css({
      'opacity': '1'
    });
    $('.search_bx_ar').css({
      'height': '40px'
    });
  });
  });
});

.search_bx_ar {
  position: relative;
  margin: 0 0 10px 0;
  width: 100%;
  opacity: 0;
  height: 0px;
  transition: ease-in-out all .5s;
  -webkit-transition: ease-in-out all .5s;
  -moz-transition: ease-in-out all .5s;
}

.compare_sr_btn {
  float: right;
  width: 25%;
  padding-left: 15px;
  margin: 15px 0 10px 0;
}

.compare_sr_btn>#cm_now {
  background-color: #2b7f7f;
  color: #fff;
  border: none;
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 12px;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compare_sr_btn">
  <input type="button" id="cm_now" value="Compare Now" />
</div>
<div class="search_bx_ar">
  <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search">
</div>

Having trouble with the jQuery toggle functionality not working as expected

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error encountered: Vue.js encountered an unexpected token, which is 'export'

What steps should I take to troubleshoot and resolve the connection issue that arises while trying to execute npm install

When it comes to deploying middleware, accessing cookies becomes more challenging. However, in a local setup, Next.js allows middleware to

Iterating over a table and selecting a specific button on the rows that meet a specific condition

What is the best way to stack several items vertically beside an image?

HeaderView in Angular Framework

What is the best way to format dates in jQuery AJAX requests?

Setting orientations for portrait and landscape views using Material UI breakpoints

Encase all jQuery functionalities within a custom class

Open the HTML document and access the file contents

Switching an image when hovering over another div - a simple tutorial

"Step-by-step guide on showcasing a specific blog post using its unique identifier in an Angular/Express/MongoDB application

What is the best way for me to make sure the element overflows properly?

What could be causing the issue with ng-include not functioning properly?

Having trouble locating and interacting with the textarea element in Salesforce using Selenium Webdriver

User-Preferred Dark Mode Toggle Using Material-UI and Fallback Option

Ways to confine the tabindex within a specific div container

CSS navigation issue

I am encountering an issue with my PHP code that is causing an error

Why won't both routes for Sequelize model querying work simultaneously?