CODEWITHSUNDEEP
jqueryhtmlcss
Tweath
Tweath

Reputation: 134

onClick change content text + class

My problem at the moment is this, I've finally made further progress but I can't make it change it's background-color and color and the text says Hide after the content slides up again.

I got a button that shows content when you press it, the text on the button says Show and the background-color is gray but when you click it, it should say Hide with a green background.

jQuery

$(".portfolio_show_content").hide("slow");
    $(".portfolio_show").on('click', function() {
    $(".portfolio_show_content").hide();
    $(this).parent().find(".portfolio_show_content").slideToggle();
    $(this).html('Hide');
});

HTML

<div class="single_item">
    <h3>Standby overlay</h3><button class="right portfolio_show">Show</button>
    <p class="portfolio_show_content">This overlay comes in either basic or advanced, advanced includes animations and more styling-/effects.</p>
</div>

Link: jsFiddle

Upvotes: 0

Views: 672

Answers (4)

adeneo
adeneo

Reputation: 318202

Add an active class that does the same as your :hover and toggle that class and the text

$(".portfolio_show_content").hide("slow");

$(".portfolio_show").on('click', function () {
    var el  = $(this).parent().find(".portfolio_show_content").slideToggle(),
        el2 = $(this).html(function(_, htm) {
                return htm == 'Hide' ? 'Show' : 'Hide';
              }).toggleClass('active')

    $(".portfolio_show_content").not(el).hide();
    $(".portfolio_show").not(el2).removeClass('active')
});

FIDDLE

Upvotes: 1

Ariel
Ariel

Reputation: 1436

i changed a little your code to make it work. http://jsfiddle.net/fzgajurb/2/

Basically is the same, but added some lines to make it work.

       $(".portfolio_show").on('click', function() {
            $(".portfolio_show_content").hide();
            $(".portfolio_show").html('Show');
            $(".portfolio_show").removeClass('green');
            $(this).parent().find(".portfolio_show_content").slideToggle();
            $(this).addClass('green');
            $(this).html('Hide');
        });

Hope it helps.

Upvotes: 1

Guillermo Nahuel Varelli
Guillermo Nahuel Varelli

Reputation: 318

You could try

     $('button funtion').on('click', function(event) {

                $('sample1').className;
                $('sample1').removeClassName('hidden');
                $('sample1').className;

                $('sample2').className;
                $('sample2').addClassName('hidden');
                $('sample2').className;

            });

Upvotes: 1

j08691
j08691

Reputation: 207901

Try this:

$(".portfolio_show_content").hide("slow");
$(".portfolio_show").on('click', function () {
    $(this).parent().find(".portfolio_show_content").slideToggle();
    $(this).html($(this).html()=='Hide'?'Show':'Hide');
});
	div.single_item {
	    background-color: #ffffff;
	    width: 270px;
	    height: auto;
	    padding: 10px;
	    margin: 7px 0 0 0;
	}
	div.single_item p {
	    padding: 0 9px;
	    font-size: 9pt;
	    display: none;
	}
	div.single_item button {
	    border: 0;
	    width: 50px;
	    height: 25px;
	    border-radius: 20px;
	    background-color: #EEE;
	    color: #BCBCBC;
	    font-weight: 600;
	    padding: 0px 0 0 0;
	    font-size: 8pt;
	    margin: -30px 0 15px 222px;
	    cursor: pointer;
	    position: absolute;
	}
	div.single_item button:hover {
	    background-color: #38B587;
	    color: #1B6145;
	}
	div.single_item button:focus {
	    outline: none;
	}
	div.single_item button div.active {
	    content:"Hide";
	    background-color: #38B587 !important;
	}
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="single_item">
    	<h3>Standby overlay</h3>
    <button class="right portfolio_show">Show</button>
    <p class="portfolio_show_content">This overlay comes in either basic or advanced, advanced includes animations and more styling-/effects.</p>
</div>
<div class="single_item">
    	<h3>Standby overlay</h3>
    <button class="right portfolio_show">Show</button>
    <p class="portfolio_show_content">This overlay comes in either basic or advanced, advanced includes animations and more styling-/effects.</p>
</div>

Upvotes: 0

Related Questions