CODEWITHSUNDEEP
javascriptjqueryhtmlcssclick
paulj
paulj

Reputation: 51

Using jquery to swap text, how to revert other text to original?

So I have a bit of jquery that I am using to swap "View Bio" for "Hide Bio" and vice versa for multiple profiles. Works great, only I'm not sure how to make it so that when you click a different profile's "View Bio" while one's "Hide Bio" is active, the other profile's "Hide Bio"s reverts back to the original "View Bio".

Basically, I want to only have one saying "Hide Bio" at all times (making it the only active bio). Also I want it so I can still click the one that currently says "Hide Bio" to make it say "View Bio" (i.e. All profiles say "View Bio")

Here's a fiddle: http://jsfiddle.net/pauljackson/2zn4X/

(EDIT - updated fiddle with solution implemented: http://jsfiddle.net/pauljackson/2zn4X/2/)

js:

$(document).ready(function () {
   $(".viewbio").click(function() {
        var $self = $(this);
        if ($self.text().trim() == "VIEW BIO")
        $self.text("HIDE BIO");
        else
        $self.text("VIEW BIO");
    });
});

html:

<body>
<div id="ourteamslide">
<div class="maincontent">
<div class="ourteamlist">
            <ul>
                <li>                        
                    <img src="http://eldoradospringsmo.com/pages/wp-content/uploads/2014/07/wpid-WP_IM_1404400872566__0.jpg" class="profilepic" alt="Profile Pic">
                    <div class="lilbluebox">
                        <div class="teambox">
                            <ul>
                                <li>
                                    <p class="whitetext">Some Dude</p>

                                </li>
                                <li>
                                    <div class="viewbio">VIEW BIO</div>
                                                                        </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>                        
                    <img src="http://eldoradospringsmo.com/pages/wp-content/uploads/2014/03/wpid-WP_IM_1395933210796__1.jpg" class="profilepic" alt="Profile Pic">
                    <div class="lilbluebox">
                        <div class="teambox">
                            <ul>
                                <li>
                                    <p class="whitetext">Some Gal</p>

                                </li>
                                <li>
                                    <div class="viewbio">VIEW BIO</div>                             
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>                        
                    <img src="http://ind.ccio.co/I/g5/U9/4ea7744cfd95a0b491203004e516808f.jpg?iw=300" class="profilepic" alt="Profile Pic">
                    <div class="lilbluebox">
                        <div class="teambox">
                            <ul>
                                <li>
                                    <p class="whitetext">Some Old Man</p>

                                </li>
                                <li>
                                    <div class="viewbio">VIEW BIO</div>
                                                                        </li>
                            </ul>
                        </div>
                    </div>
                </li>
        </ul>
</div>
</div>
</div>
</body>

css:

body{
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size:12px;
width:100%;
height:100%;
}
.maincontent{
max-width:1240px;
height:100%;
margin:0 auto;
padding-right:30px;
}
#ourteamslide{
height:auto;
background-color:#eeeeee;
padding-top:80px;
}
.whitetext{
color:#000000;
width:200px;
}
.ourteamlist{
max-width:1200px;
height:1000px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
}
.biobox{
display:block;
background-color:#1E2129;
color:#FFFFFF;
padding-left:30px;
padding-top:20px;
padding-right:30px;
max-width:600px;
}
.teambox ul li a{
text-decoration: none;

Thank you for your help!

Upvotes: 0

Views: 1872

Answers (3)

Bennett Miller
Bennett Miller

Reputation: 106

What you can do is select and set all the links to "View Bio" before changing the clicked link to "Hide Bio".

$(document).ready(function () {
    $(".viewbio").click(function() {
        var $self = $(this);
        var originalText = $self.text().trim();

        $(".viewbio").text("VIEW BIO");

        if (originalText == "VIEW BIO") {
            $self.text("HIDE BIO");
        }

    });
});

Upvotes: 3

Patrick Evans
Patrick Evans

Reputation: 42746

You can do this with css and a separate element for the text "hide" and "view"

HTML

<div class="viewbio">
   <span class="view">View</span>
   <span class="hide">Hide</span> 
   Bio
</div>

CSS

.viewbio .hide, .viewbio.active .view {
   display:none;
}

.viewbio.active .hide {
   display: inline;
}

Then just select all viewbio's that are active and remove the active class, and then add the active class to the clicked on.

$(".viewbio").click(function(){
    var wasActive = $(this).hasClass("active");
    $(".viewbio.active").removeClass("active");
    if(!wasActive) $(this).addClass("active");
})

Fiddle

Upvotes: 2

KJ Price
KJ Price

Reputation: 5984

This will select the items that have "HIDE BIO" and change those plus the item that you clicked. 

    $(document).ready(function () {
       $(".viewbio").click(function() {
            var $self = $(this);
           if ($self.text().trim() == "VIEW BIO"){
               $(".viewbio:contains('HIDE BIO')").text("VIEW BIO");
               $self.text("HIDE BIO");
           }
           else{
               $self.text("VIEW BIO");

           }
        });
    });

Upvotes: 1

Related Questions