How to make text appear and disappear with Jquery

Asked

Viewed 185 times

-2

I’m learning html/css/js now, and I’m having a question that’s getting me serious. I am trying to create a button where, when pressed, hide the title (when it is showing) and make it appear again (when it is hidden). I have tried many ways, but none works. I click on the button and nothing happens. Some hint? (NOTE: I am using Jquery)

$(document).ready(function() {
    if ($('h1').show()) {
        (function(){
            $('BUTTON').click(function(){
                $('h1').hide();
            })
        })
    } else {
        (function(){
            $('BUTTON').click(function(){
        $('BUTTON').text('Mostrar Olá Mundo');
                $('h1').show();
            })
        })
    }
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>Olá Mundo</h1>
    <BUTTON>Esconder Olá Mundo</BUTTON>
    <footer>
        <script src="jquery.js"></script>
        <script src="script.js"></script>
    </footer>
</body>
</html>

javascript html jquery

1 answer

1


Dude just use the method toggle() he’ll be right there show/hide every time you click on button

$(document).ready(function() {
     $('BUTTON').click(function(){
    
            $('h1').toggle();
        
    })
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <h1>Olá Mundo</h1>
    <BUTTON>Esconder Olá Mundo</BUTTON>
    <footer>
        <script src="jquery.js"></script>
        <script src="script.js"></script>
    </footer>
</body>
</html>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.