CODEWITHSUNDEEP
jquery
tdrsam
tdrsam

Reputation: 527

how do i clear jquery click functions

I've got two buttons that both have hidden elements.

This is the basics of the HTML:

<button class="read">
<table class="displayReviews">
<button class="write">
<form class="writeForm">

There's some js to toggle the table and the form.

This is the js.

$('.read').click(function() {
    $('.displayReviews').toggle(),
    $('.displayReviews').css("position", "relative"),
    $('.writeForm').css("visibility","hidden");
});

$(document).ready(function() {
    $('.write').click(function() {
        $('.writeForm').toggle(),
        $('.writeForm').css("visibility","visible"),
        $('.writeForm').slideToggle("slow") ,
        $('.displayReviews').css("position", "absolute"),
        $('.displayReviews').css("top", "1000px");
    return false;
    });
});

I know this is a huge mess. If someone could just point me in the right direction, it'd be much appreciated.

I want it to display the form when the write button is clicked, and the table when the read button is clicked.

Upvotes: 2

Views: 101

Answers (4)

guradio
guradio

Reputation: 15555

$('.read').click(function() {
  $('.displayReviews').toggle("slow");
  $('form.writeForm').hide("slow");
});


$('.write').click(function() {
  $('form.writeForm').toggle("slow");
  $('.displayReviews').hide("slow");

});

try this way fiddle

Upvotes: 1

Swaprks
Swaprks

Reputation: 1553

Here is a fiddle of what you need.

http://jsfiddle.net/swaprks/aL0djmju/

<button class="read">Read</button>
<table class="displayReviews"><tr><td>Table displayed</td><tr></table>
<button class="write">Write</button>
<form class="writeForm">Form displayed</form>

.displayReviews, .writeForm{ display: none;}

$(function(){
    $(".read").click(function(){
        $(".displayReviews").toggle();
        $(".writeForm").hide();
    });

    $(".write").click(function(){
        $(".writeForm").toggle();
        $(".displayReviews").hide();
    });
});

Upvotes: 3

Muhammad Nasir
Muhammad Nasir

Reputation: 2204

html :

    <button class="read" >read</button>
<table class="displayReviews"  style="display:none;"><tr><td>table test</td></tr></table>
<button class="write">write</button>
<form class="writeForm" style="display:none;"><label> form toggle</label></form>

Set display to none on load and toggle it using jquery

$('.read').click(function() {
    $('.displayReviews').slideToggle(),
    $('.displayReviews').css("position", "absolute"),
    $('.writeForm').hide();
});



    $('.write').click(function() {

        $('.writeForm').css("visibility","visible"),
        $('.writeForm').slideToggle("slow") ,
        $('.displayReviews').hide();
        //$('.displayReviews').css("position", "absolute"),
      //  $('.displayReviews').css("top", "1000px");

    });

Upvotes: 0

Arun AK
Arun AK

Reputation: 4370

Here, what i did is,

  1. I created a form, a table and two buttons.

  2. Then i added css display:none; for both form and table.

  3. On the click of the respective buttons, the content will be show by changing their css Display property to block

JS code : 

$('.read').click(function() {
    $(".displayReviews").css("display","block");
    $(".writeForm").css("display","none");
});

$('.write').click(function() {
    $(".writeForm").css("display","block");
    $(".displayReviews").css("display","none");
});

CSS code : 

.displayReviews{
    display:none;
}
.writeForm{
    display:none;
}

HTML code : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="read">Read</button>
<table class="displayReviews">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table><br/>
<button class="write">Write</button>
<form class="writeForm">
    <label for="name">Name</label>
    <input type="text" id='name'/>
</form>

Hope it helps you :)

Upvotes: 2

Related Questions