ansaurus

Question

How can I hide a string and replace it with a view/hide button using jQuery?

Answer 1

+1 A:

If you have control of the output of the page then the best way to do it is just to create a div or span or similar which is what you want to hide.

<span id="editsToHide">These are my edits</span>

And then you can find this easily with $('#EditsToHide')

http://jsfiddle.net/8q8ds/ is an example of the code you want (probably could be done more stylishly and more neatly but its a proof of concept that shoudl get you thinking in the right direction.

Note I also added in stuff to make it work on non-JS browsers by having CSS hide the button and not the edits and then teh javascript hides the edits and shows the buttons. No JS means it will show the data always rather than have it hidden with no way to get to it. :)

Edit:

To do it without control of the markup you need to add in your own markup. I've done a new fiddle based on the old one here: http://jsfiddle.net/8q8ds/2/. The key new code is:

var messageText = $('.note_message').html()
var staticText = 'The order was manually edited:<br/>';
var dynamicText = messageText.substring(staticText.length-1);
var newHTML = staticText + '<span id="editsToHide">'+dynamicText+'</span>'
$('.note_message').html(newHTML);

You can see it finds the contents of your "note_message" span (note if there is more than one of these unexpected behaviour may occur). It then chops off the known part to get the unknown part (you may want to do some validation to make sure the bit you chop off was actually what you expected in case of changes to outputted HTML). It then constructs some new HTML with a span to give it the format as described above and then continue as before.

Hope this helps.

Edit 2: Just updated the second jsfiddle since I realised I wasn't dynamically adding the button.

Chris 2010-07-16 09:47:44

Your code looks really good, except, I dont have control of the string I am using. That is why I want to select all of the text after the string "The order was manually edited:" and save that into a variable. How can I do that first?

zeckdude 2010-07-16 10:19:14

@zeckdude: In that case we need to see more of your page structure. The information you've given us might allow us to find where to start looking for the string to show/hide but we've currently got no info on how we'd find the end of that string. Show us the HTML around this section of page and we might be able to help you find a way of locating what you want.

Chris 2010-07-16 10:39:24

<span class="note_message">The order was manually edited:<br/>The list of edits goes here, and this maybe somewhat long sometimes</span>That is an example of the html structure of what the string is in. It is always the same class and it always starts with that string.

zeckdude 2010-07-16 10:42:27

@zeckdude: I've edited my answer to include how to cope with needing to alter the initial markup. I hope this helps you a bit but make sure you code defensively against changes to the HTML format so you don't end up just butchering the page if it changes.

Chris 2010-07-16 11:26:37

Answer 2

A:

Why not just wrap your edits in some container? Then just hide it using javascript so people without it can enjoy your list of edits too.

Some sample code:

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript">
            $(function() {
                $('#edits').css('display', 'none');
                $('#show.button').css('display', 'inline');
                $('.button').click(
                    function() {
                        $('#edits, .button').toggle();
                    }
                );
            });
        </script>
        <style type="text/css">
            .button {
                display: none;
            }
        </style>
    </head>
    <body>
        The order was manually edited:
        <input type="submit" value="Click to View Edits" id="show" class="button" />
        <input type="submit" value="Hide Edits" id="hide" class="button" />
        <p id="edits">
            Some edits.
        </p>
    </body>
</html>

Daniel 2010-07-16 09:49:13

ansaurus

tags:

views:

answers:

How can I hide a string and replace it with a view/hide button using jQuery?

related questions