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

Trouble with sending SMTP emails from Flask app (Error 500)

Using the / (forward slash) in CSS styling statements

In React, firebase.firestore() is operational, but firebase.functions() remains undefined

Unable to display bar chart on PHP webpage showing database number volumes using JavaScript

Is there a way to deactivate other dropdown options?

How can I add content to the body of a modal in Bootstrap 3?

I am seeking to incorporate several Three.js animations into my HTML document, but I am experiencing issues with them

Centered title in side menu for Ionic 3

Ways to retrieve the file name and additional attributes from a hidden input type

How to send props from a Vue.js component tag in an HTML file

Using Regular Expressions in JavaScript to verify if an element from an array is contained within a string

What is the best way to enlarge the image to a specific percentage?

Vuetify autocomplete with server-side functionality

Leveraging Vue Data for Storing CSS Properties

Error with ajax call in jQuery mobile app

Send myArray via ajax to php

Implementing Ionic 4 with HTML2Canvas technology

Why is my Vue list not showing the key values from a JavaScript object?

Is it preferable to include in the global scope or the local scope?

Unable to execute internal functional tests due to this error: [POST http://localhost:4444/wd/hub/session] unable to connect - ECONNREFUSED