jquery slide toggle function issue

Question

5.00/5 (1 vote)

See more:

hii friends,

i implemented slidetoggle functions using jquery

here my issue is when i click first time it's not working.second time i click it's working.

i am using this code

C#

$("document").ready(function () {
      var active = false;
      if ($("#HiddenField1").val() == "block") {
          $("#FiltersliderDiv").css("display", "none");

      }
      if ($("#HiddenField1").val() == "none") {
          $("#FiltersliderDiv").css("display", "block");
          $("#Filters").css('background-color', '#0082AA');
          $("#MapAndChart").css('background-color', '#0082AA');
          $("#Report").css('background-color', '#0082AA');
      }
      $("#Filters").click(function () {

        if (active == false) {
              $("#FiltersliderDiv").slideDown("slow");
              $("#ReportsliderDiv").slideUp("slow");

              $("#MapAndChartsliderDiv").slideUp("slow");
              $("#MapAndChart").css('background-color', 'Gray');
              $("#Filters").css('background-color', '#0082AA');
              $("#Filters").css('fontcolor', '#333333');
              $("#Report").css('background-color', 'Gray');

              document.getElementById("MapAndChart").style.color = "black";
              document.getElementById("Report").style.color = "black";
              document.getElementById("Filters").style.color = "White";
              active = true;
          }
          else {
              $("#FiltersliderDiv").slideUp("slow");
              $("#Filters").css('background-color', 'Gray');
              document.getElementById("Filters").style.color = "black";

              active = false;
          }


      });
  });

  $("document").ready(function () {
      var active = false;
      if ($("#HiddenField2").val() == "block") {
          $("#MapAndChartsliderDiv").css("display", "none");
          $("#MapAndChart").css('background-color', 'Gray');
      }
      if ($("#HiddenField2").val() == "none") {
          $("#MapAndChartsliderDiv").css("display", "block");

      }

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


          if (active == false) {
              $("#MapAndChartsliderDiv").slideDown("slow");
              $("#FiltersliderDiv").slideUp("slow");
              $("#ReportsliderDiv").slideUp("slow");

              $("#MapAndChart").css('background-color', '#0082AA');
              $("#Filters").css('background-color', 'Gray');
              $("#Report").css('background-color', 'Gray');

              document.getElementById("MapAndChart").style.color = "White";
              document.getElementById("Report").style.color = "black";
              document.getElementById("Filters").style.color = "black";
              active = true;
          }
          else {
              $("#MapAndChartsliderDiv").slideUp("slow");
              $("#MapAndChart").css('background-color', 'Gray');
              document.getElementById("MapAndChart").style.color = "black";
              active = false;
          }

      });
  });
  $("document").ready(function () {
      var active = false;
      if ($("#HiddenField3").val() == "block") {
          $("#ReportsliderDiv").css("display", "none");
          $("#Report").css('background-color', 'Gray');

      }
      if ($("#HiddenField3").val() == "none") {
          $("#ReportsliderDiv").css("display", "block");

      }

      $("#Report").click(function () {
          if (active == false) {
          $("#ReportsliderDiv").slideDown("slow");
          $("#FiltersliderDiv").slideUp("slow");
          $("#MapAndChartsliderDiv").slideUp("slow");

          $("#MapAndChart").css('background-color', 'Gray');
          $("#Filters").css('background-color', 'Gray');
          $("#Report").css('background-color', '#0082AA');

          document.getElementById("MapAndChart").style.color = "black";
          document.getElementById("Report").style.color = "White";
          document.getElementById("Filters").style.color = "black";
          active = true;

          }
      else {
          $("#ReportsliderDiv").slideUp("slow");
          $("#Report").css('background-color', 'Gray');
          document.getElementById("Report").style.color = "black";

          active = false;
          }
      });
  });

please share any idea to me.

Posted 10-Mar-14 21:58pm

krish2013

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sampath Lokuge · Answer 1 · 2014-03-10T22:13:00

Solution 1

Please change your all click events is as below and after that test it.

C#

$("#Filters").off('click').on('click', function(){

  //your code here

  return false; //to prevent the browser actually following the links!

});

Posted 10-Mar-14 22:13pm

Sampath Lokuge

Updated 10-Mar-14 22:40pm

v2

Comments

krish2013 11-Mar-14 4:59am

hii Sampth,
it's not working please share any code to me.

Sampath Lokuge 11-Mar-14 5:10am

Did you check, are there any errors on JS file by using chrome dev tools ?

krish2013 11-Mar-14 5:45am

hi sampath,
no errors are there

Sampath Lokuge 11-Mar-14 6:06am

Can we test this on live (any url) ?

krish2013 11-Mar-14 6:12am

no sampath can i share total code

Sampath Lokuge 11-Mar-14 6:15am

Can you configure this on jsFiddle ?
http://jsfiddle.net/

krish2013 11-Mar-14 6:19am

ya sure go through this link http://jsfiddle.net/#&togetherjs=rH5Dd3u3JA

krish2013 11-Mar-14 6:25am

hi sampath,
go through http://jsfiddle.net/#&togetherjs=rH5Dd3u3JA this link

Sampath Lokuge 11-Mar-14 6:27am

Why have you maintained lots of document.ready events ?

krish2013 11-Mar-14 6:28am

based on hiddenfields i call the functions

Sampath Lokuge 11-Mar-14 6:29am

Can't you put all of your js code inside a single documet.ready() method?

krish2013 11-Mar-14 6:39am

it's possible
you got any errors

Sampath Lokuge 11-Mar-14 6:40am

Put all in one document.ready() method and change the Jsfiddle also.Then only I can test it.

krish2013 11-Mar-14 6:45am

http://jsfiddle.net/#&togetherjs=rH5Dd3u3JA go through this link