problems fadeToggle toggle of jquery

Question

problems fadeToggle toggle of jquery

Navigation

#1 by (3 votes)
#2 by (3 votes)

1

As you know, the function toggle was obsolete in the version of jquery 3.1 I remember that in previous versions I could do the following

$("button").toggle(function(){


    $("p").hide()//just an example hide p tags
   $("div").html("Goodnight stackoverflow comunity");
},function(){


    $("p").show()//just an example show p tags
     $("div").html("Goobye stackoverflow comunity");

})

this code what I did was that when I clicked a button I hid the p tags and added a text to a div then when I clicked it again I hid them and changed the contents of the div, but this was obsolete from the version of jquery 3.1.1 how could I do the same in new versions of jquery?

that is, I need to do something similar to that code by clicking on a button to show a div with an information and change a text from show info to hide info and vice versa try the following but it only makes me the toggle of the div but I do not change the text this is my code:

$(document).on("click",".info",function(e){

 e.stopPropagation();

    $(".show-info").stop().fadeToggle(function(){

              $("#show").html("hide");

     },function () {

        $("#show").html("Show");
    });

        })


     $("html").click(function(){

     $(".show-info").stop().slideUp();
       })


    })

someone who gives me a hand thanks in advance!

jquery

asked by andy gibbs 18.09.2018 в 06:18

source

2 answers

3

Actually the function toggle() was disapproved in jQuery 1.8 and it was removed in version 1.9.

You could use a marker that changes every time you press the button, something like this:

var flag = true;
$('button').click(function() {
  if (flag) {
    $("p").hide() //just an example hide p tags
    $("div").html("Goodnight stackoverflow comunity");
  } else {
    $("p").show() //just an example show p tags
    $("div").html("Goobye stackoverflow comunity");
  }
  flag = !flag;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click aquí</button>
<p> párrafo </p>
<div></div>

answered by 18.09.2018 в 09:28

How to remove the '#' from a Use rand in c to generate a sequence of random numbers that go from 3 to 3?

score 3 · Accepted Answer

I think what you were looking for is the slideToggle() function. What it does is that if the element to which you apply it is hidden, it shows it, and if it is visible, it hides it.

To control the text that is to be shown, I also add to the paragraph a class that I use as a control and thus differentiate when the text is hidden or not. As you can see, there is a function called toggleClass() that suits us very well to work with our slideToggle() .

HTML

<p id="miParrafo">
Escóndeme
</p>
<div>
  <p>
    Goodnight stackoverflow comunity
  </p>
</div>

<button id="miBoton">
  ¡Pínchame!
</button>

JQUERY

$('#miBoton').click(function () {
    $('#miParrafo').slideToggle();
  $('#miParrafo').toggleClass('escondido');

  if ($('#miParrafo').hasClass('escondido')) {
    $('div p').html('Goodnight stackoverflow comunity');
  }
  else {
    $('div p').html('Goobye stackoverflow comunity');
  }

});