Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

jquery toggle effect

Posted on 2013-01-10
16
358 Views
Last Modified: 2013-01-10
im using jquery to make a toggle effet , like this

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>

    <style>
    
div.section
{
	margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: rgb(29, 113, 184);
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
}

div.section.green
{
		margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: #3aaa35;
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
	}


div.section a
{
	color: #FFFFFF;
	display: block;
	font-family: 'axure_handwritingregular';
	font-weight:normal;
	text-decoration: none;
}

    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div id='ViewCandidateInformationHeader' class="section">
        <a href="#" rel="toggle[ViewCandidateInformation]" data-openimage="images/collapse.png" data-closedimage="images/expand.png">
            Basic Details
            <img src="icons/Collapsed.png" border="0" id="imgCI" class="img-swap"/>
        </a>
        
        </div>
        <div id="ViewCandidateInformation">    
        <fieldset>
            <h1>
      
      
                asdasdsad</h1>
      
        </fieldset>
        </div>  
        
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
    
    </script>

        <script type="text/javascript" >

            // Applying SlideToggle effect on View Candidate Information Panel
            $("#imgCI").click(function() {
                $("#ViewCandidateInformation").slideToggle();
                if ($(this).attr("class") == "img-swap") {
                    this.src = this.src.replace("Collapsed", "Expanded");
                } else {
                    this.src = this.src.replace("Expanded", "Collapsed");
                }
                $("#ViewCandidateInformationHeader").toggleClass("green");
                $(this).toggleClass('clicked');
            });
          
        

     
        </script>
</body>
</html> 

Open in new window


i need to change it and want to hv click event on label1

plz help
0
Comment
Question by:panasonic2012
  • 8
  • 5
  • 3
16 Comments
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 38762188
0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 38762190
TRY THIS - use html lable

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>

    <style>
    
div.section
{
	margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: rgb(29, 113, 184);
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
}

div.section.green
{
		margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: #3aaa35;
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
	}


div.section a
{
	color: #FFFFFF;
	display: block;
	font-family: 'axure_handwritingregular';
	font-weight:normal;
	text-decoration: none;
}

    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div id='ViewCandidateInformationHeader' class="section">
        <a href="#" rel="toggle[ViewCandidateInformation]" data-openimage="images/collapse.png" data-closedimage="images/expand.png">
            Basic Details
            <img src="icons/Collapsed.png" border="0" id="imgCI" class="img-swap"/>
        </a>
        
        </div>
        <div id="ViewCandidateInformation">    
        <fieldset>
            <h1>
      
      
                asdasdsad</h1>
      
        </fieldset>
        </div>  
        
        <Label ID="Label1"  runat="server" Text="Label" class="img-swap"> Label</Label>
    </div>
    </form>
    
    </script>

        <script type="text/javascript" >

            // Applying SlideToggle effect on View Candidate Information Panel
            $("#Label1").click(function() {
            alert("clicked")
                $("#ViewCandidateInformation").slideToggle();
               /* if ($(this).attr("class") == "img-swap") {
                    this.src = this.src.replace("Collapsed", "Expanded");
                } else {
                    this.src = this.src.replace("Expanded", "Collapsed");
                }*/
                $("#ViewCandidateInformationHeader").toggleClass("green");
                $(this).toggleClass('clicked');
            });
          
        

     
        </script>
</body>
</html>  

Open in new window

0
 

Author Comment

by:panasonic2012
ID: 38762286
i also need to change the image src , plz help me with that also , will be really appreciated
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 19

Expert Comment

by:Manoj Patil
ID: 38762291
You can find your image like
~/icons/Collapsed.png
0
 

Author Comment

by:panasonic2012
ID: 38762321
but what do i write in place of

 /* if ($(this).attr("class") == "img-swap") {
                    this.src = this.src.replace("Collapsed", "Expanded");
                } else {
                    this.src = this.src.replace("Expanded", "Collapsed");
                }*/

Open in new window

0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 38762331
First take 2 variables in you function
var oldSrc = 'http://example.com/Collapsed.png';
var newSrc = 'http://example.com/expand.png';

To use

this.src = this.src.replace("oldSrc ", "newSrc");

I have not checked, whether it works or not.
But give a try
0
 

Author Comment

by:panasonic2012
ID: 38762340
no it didnt work , plz help
0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 38762372
try this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>

    <style>
    
div.section
{
	margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: rgb(29, 113, 184);
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
}

div.section.green
{
		margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: #3aaa35;
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
	}


div.section a
{
	color: #FFFFFF;
	display: block;
	font-family: 'axure_handwritingregular';
	font-weight:normal;
	text-decoration: none;
}

    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div id='ViewCandidateInformationHeader' class="section">
        <a href="#" rel="toggle[ViewCandidateInformation]" data-openimage="images/collapse.png" data-closedimage="images/expand.png">
            Basic Details
            <img src="icons/Collapsed.png" border="0" id="imgCI" class="img-swap"/>
        </a>
        
        </div>
        <div id="ViewCandidateInformation">    
        <fieldset>
            <h1>
      
      
                asdasdsad</h1>
      
        </fieldset>
        </div>  
        
        <Label ID="Label1"  runat="server" Text="Label" class="img-swap"> Label</Label>
    </div>
    </form>
    
    </script>

        <script type="text/javascript" >

            // Applying SlideToggle effect on View Candidate Information Panel
            $("#Label1").click(function() {
      
                $("#ViewCandidateInformation").slideToggle();
                
                if ($("#imgCI").attr("class") == "img-swap") {
                    $("#imgCI").attr("src" ,$("#imgCI").attr("src").replace("Collapsed", "Expanded"));
                } else {
                    $("#imgCI").attr("src",("#imgCI").attr("src").replace("Expanded", "Collapsed"));
                }
                $("#ViewCandidateInformationHeader").toggleClass("green");
                $(this).toggleClass('clicked');
            });
          
        

     
        </script>
</body>
</html>  

Open in new window

0
 

Author Comment

by:panasonic2012
ID: 38762394
the img doesnt change back on second click :(
0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 38762397
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>

    <style>
    
div.section
{
	margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: rgb(29, 113, 184);
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
}

div.section.green
{
		margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: #3aaa35;
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
	}


div.section a
{
	color: #FFFFFF;
	display: block;
	font-family: 'axure_handwritingregular';
	font-weight:normal;
	text-decoration: none;
}

    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div id='ViewCandidateInformationHeader' class="section">
        <a href="#" rel="toggle[ViewCandidateInformation]" data-openimage="images/collapse.png" data-closedimage="images/expand.png">
            Basic Details
            <img src="icons/Collapsed.png" border="0" id="imgCI" class="img-swap"/>
        </a>
        
        </div>
        <div id="ViewCandidateInformation">    
        <fieldset>
            <h1>
      
      
                asdasdsad</h1>
      
        </fieldset>
        </div>  
        
        <Label ID="Label1"  runat="server" Text="Label" class="img-swap"> Label</Label>
    </div>
    </form>
    
    </script>

        <script type="text/javascript" >

            // Applying SlideToggle effect on View Candidate Information Panel
            $("#Label1").click(function() {
      
                $("#ViewCandidateInformation").slideToggle();
                
                if ($("#imgCI").attr("class") == "img-swap") {
                    $("#imgCI").attr("src" ,$("#imgCI").attr("src").replace("Collapsed", "Expanded"));
                } else {
                    $("#imgCI").attr("src",$("#imgCI").attr("src").replace("Expanded", "Collapsed"));
                }
                $("#ViewCandidateInformationHeader").toggleClass("green");
                $(this).toggleClass('clicked');
            });
          
        

     
        </script>
</body>
</html>  

Open in new window

0
 

Author Comment

by:panasonic2012
ID: 38762404
still not changing , wat cud be the issue ?
0
 
LVL 39

Accepted Solution

by:
Pratima Pharande earned 500 total points
ID: 38762455
try
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>

    <style>
    
div.section
{
	margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: rgb(29, 113, 184);
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
}

div.section.green
{
		margin: 0px;
	text-align: center;
	font-size: 18px;
	font-family: 'axure_handwritingregular';
	background-color: #3aaa35;
	padding: 2px;
	border-bottom: 2px solid rgb(63, 115, 188);
	}


div.section a
{
	color: #FFFFFF;
	display: block;
	font-family: 'axure_handwritingregular';
	font-weight:normal;
	text-decoration: none;
}

    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div id='ViewCandidateInformationHeader' class="section">
        <a href="#" rel="toggle[ViewCandidateInformation]" data-openimage="images/collapse.png" data-closedimage="images/expand.png">
            Basic Details
            <img src="icons/Collapsed.png" border="0" id="imgCI" class="img-swap"/>
        </a>
        
        </div>
        <div id="ViewCandidateInformation">    
        <fieldset>
            <h1>
      
      
                asdasdsad</h1>
      
        </fieldset>
        </div>  
        
        <Label ID="Label1"  runat="server" Text="Label" class="img-swap"> Label</Label>
    </div>
    </form>
    
    </script>

        <script type="text/javascript" >

            // Applying SlideToggle effect on View Candidate Information Panel
            $("#Label1").click(function() {
      
                $("#ViewCandidateInformation").slideToggle();
                
                if ($("#imgCI").attr("class") == "img-swap") {
                    $("#imgCI").attr("src" ,$("#imgCI").attr("src").replace("Collapsed", "Expanded"));
                } else {
                    $("#imgCI").attr("src",$("#imgCI").attr("src").replace("Expanded", "Collapsed"));
                }
                $("#ViewCandidateInformationHeader").toggleClass("green");
                $("#imgCI").toggleClass('clicked');
            });
          
        

     
        </script>
</body>
</html>  

Open in new window

0
 

Author Closing Comment

by:panasonic2012
ID: 38762459
works . sorry for being a noob
0
 

Author Comment

by:panasonic2012
ID: 38762470
cud u plz explain why wasnt it working before , i cant seem to find the difference , im learning
0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 38762491
we have not changed this line before

 $("#imgCI").toggleClass('clicked');
0
 

Author Comment

by:panasonic2012
ID: 38762493
yea , i just noticed that ... not really sure wat that line does though ...
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question