CODEWITHSUNDEEP
jquery
Sidharth
Sidharth

Reputation: 61

Hide show function not working in Jquery

My test.php page is as under

<!DOCTYPE html>
    <html lang="en">
    <head>
    </head>
    <body>
    <a href="#" id="hideshowone">Hide</a>
    <div id="hideshowotherone" style="padding:20px; margin:20px; border:2px solid black; width:400px; color:green;" >However, as a practical matter, you will be somewhat more limited if you want your documents to work with a variety of browsers, CSS editors, and JavaScript frameworks.
    As noted in other responses, jQuery has problems with ids that contain periods and colons.</div>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    </body>
    </html>

I am using Jquery version: /*! jQuery v1.11.2 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ My main.js page is as under:

$('#hideshowone').toggle(function(){
$('#hideshowone').text('Show');
$('#hideshowotherone').hide();
},function(){
$('#hideshowone').text('Hide');
$('#hideshowotherone').show();
});

I want to operate hide and show function with one single link i.e. when I press hide then paragraph should hide and link text should appear as show and when I press the link show then paragraph should appear and link text should change to hide, please help as this code is not working as paragraph appears however link disappears immediately as an when page is loaded, please help:

Upvotes: 2

Views: 377

Answers (4)

mkCode
mkCode

Reputation: 46

This works fine for me. Try it out

<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
</head>
<body>
  <a href="#" id="hideshowone">Hide</a>
  <div id="hideshowotherone" style="padding:20px; margin:20px; border:2px solid black; width:400px; color:green;" >However, as a practical matter, you will be somewhat more limited if you want your documents to work with a variety of browsers, CSS editors, and JavaScript frameworks.
    As noted in other responses, jQuery has problems with ids that contain periods and colons.</div>


    <script>

      $("#hideshowone").click(function(){

      if($(this).text() == 'Show'){
        $(this).text('Hide');
        $("#hideshowotherone").toggle();
      } else {
        $(this).text('Show');
        $("#hideshowotherone").toggle();
      }
    });

    </script>

  </body>
  </html>

if you have any questions let me know

Upvotes: 1

t3chb0t
t3chb0t

Reputation: 18636

How about this:

$(document).ready(function () {
    $('#hideshowone').click(function () {
        if ($('#hideshowotherone').is(':visible')) {
            $('#hideshowone').text('Show');
            $('#hideshowotherone').fadeOut();
        } else {
            $('#hideshowone').text('Hide');
            $('#hideshowotherone').fadeIn();
        }
    });
});

jsfiddle with jQuery 1.11.0

Upvotes: 0

Superman
Superman

Reputation: 881

I think this will help you. Check out the fiddle. 

$(document).ready(function(){
    $('#hideshowone').click(function(){
$('#hideshowotherone').toggle();
        if($(this).text() == "Hide"){
$('#hideshowone').text('Show');
        }else
$('#hideshowone').text('Hide');            
        });

});

Upvotes: 0

jay.jivani
jay.jivani

Reputation: 1574

$('#hideshowone').click(function(){
  $('#hideshowotherone').toggle();
});

Upvotes: 0

Related Questions