How to change CSS on click?

Question

I have 4 cards which contain data. I want when first header text card is clicked, it expand upward, and info I displayed and when clicked the same card it hide the body but the rest card stays the same,

Here is visual of what I want.

UPDATE

Here is JSFiddle with all four cards: http://jsfiddle.net/Mwanitete/rzjxkv8e/2/ Here is HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="data">

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="collapse">
        <div class="card-body">
            card block
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="collapse">
        <div class="card-body">
            card block
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="collapse">
        <div class="card-body">
            card block
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="collapse">
        <div class="card-body">
            card block
        </div>
    </div>
</div>
</div>

Here is JavaScript

$('.card-header').click(function(){
    $('.card').toggleClass('.card-size')
})

Here is CSS

.data{
  display: flex;
}

.card-size{
  height: 224px;
}

What is not working with it? In your fiddle it expands when I click it, but the top of the box is already at the top, so It cannot expand up from what is in your fiddle. — Ajaypayne, Sep 12 '18 at 15:09
First of all, your class to toggle has a point. It shouldn't: toggleClass('card-size'). The point is part of the selector, not of the class. And then, your selector inside the click function selects all .card elements, not those inside the card header selected. — Sergio Tx, Sep 12 '18 at 15:15
try using `$(this).closest('.card').toggleClass('.card-size')` — Pete, Sep 12 '18 at 15:15
Here is how you would do this in CSS, though it is considered a hack. If you can use JS then you should go that route, instead. https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — TylerH, Sep 12 '18 at 16:25
@Pete you solution expaands down not upward, and I will need to create a function for each card so that when I click one , the rest stays the same right now you click one everything goes down, any idea? I want a user to be able to click any card and the card should expand upward — The Dead Man, Sep 12 '18 at 16:26
@MichaelCurry Thanks for your help but your method is not working as I want, when u click the header title it slide down the title and slide up the body that is wrong when u click the header title it should slide up as image show, u can see urself that ur result does not resembles to what I want, but thank you alot for your effort — The Dead Man, Sep 12 '18 at 19:18
Using collapse or jQuery slideUp/slideDown obviously don't work, you'll need to write your own CSS animation to make that happen but I've already spent 2+ hours looking at this for you so you'll have to figure that bit out yourself, do a Google search for CSS animations. — Michael Curry, Sep 12 '18 at 19:38

score 3 · Answer 1 · edited Sep 12 '18 at 16:44

Here's a JSFiddle with a working solution.

I've stripped out the collapse attributes and pulled it down to barebones.

http://jsfiddle.net/9musLxy4/88/

HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="data">

<div class='card-container' data-card-id='1'>
  <div class='card-header' data-card-id='1'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='1'>
    <div class='data'>
      Body 1
    </div>
  </div>
</div>

<div class='card-container' data-card-id='2'>
  <div class='card-header' data-card-id='2'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='2'>
    <div class='data'>
      Body 2
    </div>
  </div>
</div>

<div class='card-container' data-card-id='3'>
  <div class='card-header' data-card-id='3'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='3'>
    <div class='data'>
      Body 3
    </div>
  </div>
</div>

<div class='card-container' data-card-id='4'>
  <div class='card-header' data-card-id='4'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='4'>
    <div class='data'>
      Body 4
    </div>
  </div>
</div>
</div>

CSS:

.data{
  display: flex;
}

.card-body {
  border: 1px solid black;
}

JS:

$('.card-container').on('click', function(event) {
    var id = $(this).data('card-id')
    $('.card-body[data-card-id="' + id + '"]').toggle()
})

ouch, this would mean you would have to program a click event for each card you create - not very scalable — Pete, Sep 12 '18 at 15:15
True, my jquery is so rusty I couldnt - with certainty - suggest how to dynamically add the toggled class on the parent and be confident it is correct. Feel free to expand on the answer. — Anthony Cregan, Sep 12 '18 at 15:17
Thanks to Michael Curry for improving on my answer with the addition of a wildcard selector. — Anthony Cregan, Sep 12 '18 at 15:45
unfortunately now your answer makes no sense as there is no card header with an id - there's a card with an id, or an inner element with a class of card header, but not one with both — Pete, Sep 12 '18 at 15:47
Yeah, I've realised that my changes actually just break your stuff. Let me have another crack at it real quick! — Michael Curry, Sep 12 '18 at 15:51
heheh, sorry, I should have checked the changes. I really shouldnt stack overflow when working. — Anthony Cregan, Sep 12 '18 at 15:56

score 0 · Answer 2 · answered Sep 12 '18 at 16:23

0

$('.card-header').click(function(){
    $(this).toggleClass('.card-size');
    $(this).parent().find('#test-block').toggleClass('show')
})

Use this

answered Sep 12 '18 at 16:23

Siya

1
1

Hi siya, this is not what I want, I have four cards, each card contain data, I want when user click one of the card it should expand upward and display the data, the rest of the card should be the same, a user can click any card, check the visual image for what I want, Thanks for help – The Dead Man Sep 12 '18 at 16:38

score 0 · Answer 3 · answered Sep 12 '18 at 16:35

0

Are you just trying to change the size of the card in general when it is expanded? If so, lose the JQuery, you just need a CSS style:

#test-block .card-body {
  height: 224px;
}

If you want to the card size to remain the same after you open it, then you would not want to toggle the size class, but simply add it.

$('.card-header').click(function(){
    $(this).closest('.card').addClass('card-size');
})

http://jsfiddle.net/9musLxy4/74/

answered Sep 12 '18 at 16:35

Esten

1,385
2
12
21

Hii Esten this is not what I want , here isw clear image of what I need https://i.stack.imgur.com/DkHlz.png , jsfidle http://jsfiddle.net/Mwanitete/rzjxkv8e/6/ when a user click one of the card it should exapnd upward – The Dead Man Sep 12 '18 at 16:42

How to change CSS on click?

3 Answers3