CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sushi
Sushi

Reputation: 676

How to display different elements by clicking in different buttons

I need to display texts by clicking in elements, every green "button" displays his text. by clicking in a button the button get a black border and his text is shown. when i click in the second button the first one have to loose the black border, and the second button get the border.

here is the simple html 

<div id="container">
    <div class="btn" id ="btn-1"></div>
    <p class="text" id="text-1">
        HI i'm numbr 1
    </p>

    <div class="btn" id ="btn-2"></div>
    <p class="text" id="text-2">
        HI i'm numbr 2
    </p>
</div>

CSS 

#container
{
    height:400px;
    width:400px;
    position:relative;
}

.btn{
    width : 50px;
    height : 50px;
    border-radius : 50px;
    background-color : green;
    margin:10px auto;
}
.text
{ 
    position:absolute;
    color:red;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:150px; 
    display:none;
 }

.clicked{
    border : 3px solid #000;
}

Jquery :

$('#btn-1').click(function(){
    $('.text').hide();
    $('#text-1').show();
    $('#btn-1').toggleClass("clicked"); //<== toggleClass isn't the thing i guess
});

$('#btn-2').click(function(){
    $('.text').hide();
    $('#text-2').show();
    $('#btn-2').toggleClass("clicked");
});

Here is a JSFFIDLE demo

Upvotes: 0

Views: 1920

Answers (5)

balexandre
balexandre

Reputation: 75073

I would simplify the javascript as you're repeating code (and that's not good)

// you can also use $('[data-showbutton]').click( ...

$('#btn-1,#btn-2').click(function(){
    var btn = $(this).data("showbutton");
    showButtonText(btn);
});

function showButtonText(btn) {    
    // reset
    $('.text').hide();      
    $('[data-button]').hide(); 
    $('[data-showbutton]').removeClass('clicked');

    // only show the selected
    $('[data-showbutton=' + btn + ']').addClass('clicked');  
    $('[data-button=' + btn + ']').show();
}

and simply add data- to your html, like:

<div id="container">
    <div class="btn" id ="btn-1" data-showbutton="1"></div>
    <p class="text" data-button="1">
        HI i'm numbr 1
    </p>

    <div class="btn" id ="btn-2" data-showbutton="2"></div>
     <p class="text" data-button="2">
        HI i'm numbr 2
    </p>
</div>

live example: http://jsfiddle.net/EgLKV/6484/

in other words, a data-showbutton will show all elements that have data-button and you can have much more elements for example, making it simpler and extendable.

Upvotes: 1

KaEr
KaEr

Reputation: 1

$('#btn-1').click(function(){
    $('.text').hide();
    $('#text-1').show();
    $('#btn-1').toggleClass("clicked", true); //<== toggleClass
    $('#btn-2').toggleClass("clicked", false);
});

$('#btn-2').click(function(){
    $('.text').hide();
    $('#text-2').show();
    $('#btn-1').toggleClass("clicked", false);
    $('#btn-2').toggleClass("clicked", true);
});

Mabye it is a solution?

Upvotes: 0

ozil
ozil

Reputation: 7117

$('#btn-1').click(function(){
    $('.text').hide();
    $('#text-1').show();
    $('#btn-1').toggleClass("clicked"); //<== toggleClass
    $('#btn-2').removeClass("clicked"); //<-- add this
});

$('#btn-2').click(function(){
    $('.text').hide();
    $('#text-2').show();
    $('#btn-2').toggleClass("clicked");
    $('#btn-1').removeClass("clicked"); //<-- add this

});

updated fiddle

Upvotes: 1

guradio
guradio

Reputation: 15555

$('.btn').click(function(){

    //$('#text-2').show();
    if('btn-1' ==$(this).attr('id')){
        $('#btn-1').addClass('clicked');
        $('#btn-2').removeClass('clicked');
        $('#text-1').show();
        $('#text-2').hide();
    }else{
        $('#btn-2').addClass('clicked');
        $('#btn-1').removeClass('clicked');
        $('#text-2').show();
        $('#text-1').hide();
    }

});

demo

Upvotes: 1

KAD
KAD

Reputation: 11102

You need to remove the class clicked from all buttons and add it to the specific one : 

$('.btn').click(function(){
    $('.btn').removeClass("clicked"); 
});

$('#btn-1').click(function(){
    $('.text').hide();
	$('#text-1').show();
    $('#btn-1').toggleClass("clicked"); //<== toggleClass
});

$('#btn-2').click(function(){
    $('.text').hide();
	$('#text-2').show();
    $('#btn-2').toggleClass("clicked");
});
#container
{
    height:400px;
    width:400px;
    position:relative;
}

.btn{
    width : 50px;
    height : 50px;
    border-radius : 50px;
    background-color : green;
    margin:10px auto;
}
.text
{ 
    position:absolute;
    color:red;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:150px; 
    display:none;
}

.clicked{
    border : 3px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="btn" id ="btn-1"></div>
    <p class="text" id="text-1">
        HI i'm numbr 1
    </p>
    
    <div class="btn" id ="btn-2"></div>
     <p class="text" id="text-2">
        HI i'm numbr 2
    </p>
</div>

Upvotes: 1

Related Questions