Change Text and Icon using jQuery - SEO

HelloWorld1
August 17, 2015
102 views
4 votes
4 Answers

When you click on “Hide Information”, I would like to change the text from “Hide Information” to “Show Information” and also change the icon: https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png.

When the text is clicked again, it should change from “Show Information” to “Hide Information”.

Please remember that when you show information the text “teststests” shall display. If you want to hide “teststests” you click on the “Hide Information”.

I don’t know how to do it.

Thanks!

$(document).ready(function(){
    $("div#test").click(function(){
        $("#test2").toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test2" style="display:none">
teststests
</div>

<div id="test">
<img src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> Show Information
</div>

Tags: jquery

Answers

check this fiddle

code

$(document).ready(function(){
    $("div#test,div#test2").click(function(){        
        $("div#test,div#test2").toggle();
    });
});

HTML

<div id="test">
<img src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> Show Information
</div>

<div id="test2" style="display:none">
    <div>teststests</div>
<img src="https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png"/>
    hide information
</div>

FIDDLE

HTML:

<div id="show" style="opacity: 1;">Click this to show (insert wanted icon)</div>

<div id="hide" style="opacity: 0;">Click this to hide (insert another icon)</div>

<p id="text" style="opacity: 0;">testest</p>

jQuery:

$(document).ready(function(){
$('#show').click(function(){
$('#show').fadeOut(500, 0);
$('#text').fadeTo(500, 1);
$('#hide').fadeTo(500, 1);
});
$('#hide').click(function(){
$('#show').fadeTo(500, 1);
$('#text').fadeOut(500, 0);
$('#hide').fadeTo(500, 0);
});
});

CSS:

#hide, #show{
position: absolute;
top: 0;
}

This is assuming you are using an font-awesome for your icon and jquery for your javascript

your markup

<div>
    <a href="#" class="toggle show"><i class="fa fa-hide"></i> Show Information</a>
</div>

Your jquery

$(function () {
    $('.toggle').click(function() {
        if ( $(this).hasClass('show') ) {
            //replace the text
            $(this).text('Hide information');
            //replace the icon
            $(this).find('i').removeClass('fa-hide').addClass('fa-show');
            $(this).removeClass('show').addClass('hide);
        } else {
            //replace the text
            $(this).text('Show information');
            //replace the icon
            $(this).find('i').removeClass('fa-show').addClass('fa-hide');
            $(this).removeClass('hide').addClass('show);                
        }
    });
});

That should do
Cheers.

Exactly what you want:

js part:

$(document).ready(function(){
    $("div#test").click(function(){

     if ($('#test2').css('display') == 'none') {
      $("#test2").show();
        $("#changeme").html("Hide Information");
         $("#changeimg").attr("src","https://cdn4.iconfinder.com/data/icons/seo-and-data/500/view-content-window-16.png");
}     
        else{
            $("#test2").hide();
        $("#changeme").html("Show Information");
            $("#changeimg").attr("src","https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png");

        }   
 });
});

You just need to change a little in the html like adding an ID:

<div id="test2" style="display:none">
teststests
</div>



<div id="test">
<img id="changeimg" src="https://cdn0.iconfinder.com/data/icons/octicons/1024/eye-16.png" /> 
<span id="changeme">Show Information</span>
</div>

Check http://jsfiddle.net/2pys32qj/

Please signup or login to give your own answer.

Click here to cancel reply.

Change Text and Icon using jQuery – SEO

Answers