• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 94
  • Last Modified:

I need some different text to show up when a user clicks this button. How?

Take a look at the screenshot below.

screenshot
When my user clicks on the arrow, an expanded version of the menu is revealed. I'm using this code to facilitate that:

Javascript...

$(\'.display_hide\').click(function(){
$(this).next().slideToggle();

html...

<tr>
								<td style="height:15px;"><a href="#" class="display_hide" style="color:#000000; text-decoration:none; outline:0;">System Performance &#9660;</a>
								<div class="slidingNavTerms" style="border:0; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px;"><a href="'.rootDirectory().'weekly_reports/index.php?id=4" target="_blank" style="color:#000000; text-decoration:none; outline:0;">KPI Performance</a></div>
								</td>
							</tr>

Open in new window


It works great, but I want to add a little "polish" by making the text change from "System Performance &#9660;" to "System Performance &#9650;" when my user clicks on the link to expand the menu.

I did this:

$(\'.display_hide\').click(function(){
$(this).next().slideToggle();
$(this).text("System Performance &#9660;");

...and I got this:

another screenshot
So, first off, I need to figure out how to display html special characters in way where they're not encoded.

Secondly, how do I make it where the text goes back to the "down arrow" when the user clicks on the link to hide the menu?

Thanks!
0
brucegust
Asked:
brucegust
  • 5
  • 5
1 Solution
 
OriNetworksCommented:
You may want to try
$(this).html("System Performance &#9660;");

Open in new window


This will tell jquery to set html rather than plain text
0
 
brucegustPHP DeveloperAuthor Commented:
Perfect, Ori!

Right now when my user clicks on the function, the menu is revealed (slideToggle) and your text is displayed as well. Excellent. The second half of my question was how do I display the original text when my user clicks on the same function to hide the menu?
0
 
OriNetworksCommented:
The same code can be used to change the text back, I believe you are using 9650 and 9660 character codes so you will need to do this in whatever hide function you are using.

$(this).html("System Performance &#9650;");

Open in new window

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.

 
brucegustPHP DeveloperAuthor Commented:
Here's my code:

$(document).ready(function(){
      
//this is your starting point where all your slidingNavTerms are hidden and your display_hide links are displayed

            $(".slidingNavTerms").hide();
            $(".display_hide").show();
 
//here\'s your actual function, as far as a user clicking on a link in order to see the "hidden" link beneath it
 
      $(\'.display_hide\').click(function(){
      $(this).next().slideToggle();
      $(this).html("System Performance &#9650;");
      });

You'll notice I've got the &#9650; beneath the slideToggle() function. The thing is, from what I can tell, it's the same code that hides the link as well as displays it. Right now, what you see works great, as far as displaying the up arrow when the user clicks on the link (&#9650), but then that up arrow remains after they click on the menu to hide the menu.

I get what you're saying, but where do it put &#9640 (down arrow) so the down arrow is diplayed when the user hides the menu?
0
 
OriNetworksCommented:
You may be better off using the toggle function instead of click

 $('.display_hide').toggle(function(){
   //the first time you click it will run this
       $(this).next().slideToggle();
       $(this).html("System Performance &#9650;");
}, function() {
   //the next click on the same element will run this 
       $(this).html("System Performance &#9660;");
       $(".slidingNavTerms").hide();
});

Open in new window

0
 
brucegustPHP DeveloperAuthor Commented:
Ori! This looks really good and I'm digging the logic, but it doesn't work. I tried to troubleshoot it, but my knowledge of Javascript is pointlessly basic. Could you look at it again and make sure there isn't something out of whack? Thanks so much for your time! We are poised on the threshold of greatness!
0
 
OriNetworksCommented:
That code does work for me although trying to post an example on jsfiddle does not so I'm not sure what my development setup is doing different.  I did not understand slideToggle until now so I have changed my code to use the slideToggle method you were originally using. See the jsfiddle for the working sample: https://jsfiddle.net/2Lroafc3/

    $('.display_hide').click(function() {
        $(this).next().slideToggle('slow',function() { 
            
            if ($(this).is(":visible"))
            {
                $(this).prev(".display_hide:first").find(".myicon").html("&#9650;");
            }
            else   
            {
                $(this).prev(".display_hide:first").find(".myicon").html("&#9660;");
            }
        });
    });

Open in new window

0
 
brucegustPHP DeveloperAuthor Commented:
Ori, sorry for dragging my feet in getting back to you. The above function does work as far as facilitating the "toggle" movement of the menu, but the arrow doesn't change.

Let me know what I'm missing.

Thanks!
0
 
OriNetworksCommented:
I'm not sure what happened but the jsfiddle link does not reflect my updated version that uses slideToggle. Lets try this again. I have added a span with a class myicon in order to easily change the icon.

https://jsfiddle.net/hjc110be/1/
0
 
brucegustPHP DeveloperAuthor Commented:
Excellent, Ori!

Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now