jquery slideToggle question

seopti
seopti used Ask the Experts™
on
When someone clicks on the text "Click here to view phone number" the phone number appears below the text and it pushes content down. What I would like to do is the phone number should appear where the text is so the text will be hidden once the link was clicked (phone number replaces text).

				<div id="showphone">Click here to view phone number</div>
<div class="phone" style="display: none;"><span itemprop="telephone"><?php echo $attorneysStuff['bizPhone'];?></span></div>

<script>
   $(document).ready(function() {
        $('#showphone').click(function() {
                $('.phone').slideToggle("slow");
        });
    });

	</script>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014
Commented:
In that case I would suggest you change your html to this

<div id="showphone" data-tel="<?php echo $attorneysStuff['bizPhone'];?>">Click here to view phone number</div>

Open in new window


And your jquery would be
   $(document).ready(function() {
        $('#showphone').click(function() {
                $('#showphone').html($(this).data("tel"));
        });
    });

Open in new window


There is no point in the extraneous HTML if you are not using it.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial