css type="checkbox" wybranie kokretnego ??

Question

Hej mam kartę w której jest zdjęcie i po naciśnięciu w button pojawia się tekst i wszystko fajnie działa ale kiedy powieliłam kartę to problem bo nie wiem jak zrobić żeby css wiedział którą ma kartę z tekstem pokazać tzn jak nacisnę na pierwszej to rozwija pierwszą ale jak nacisnę drugą to i tak rozwinie pierwszą i podobnie z trzecią itd. Próbowałam dodać wartość  :nth-child ale nie mam pomysłu jak wskazać ten wybrany, a z child nie działa lub źle coś robię. Jakieś podpowiedzi lub sugestie??

<div class="card">
                        <input type="checkbox" id="check">
                        <div class="card-inside">
                            <div class="text-box">
                                <h2>01-01-2023</h2>
                                <h6>Start</h6>
                            </div>
                            <img src="001nn.png" alt="">
                        </div>
                        <label for="check" class="control-btn"><svg xmlns="http://www.w3.org/2000/svg" width="1em"
                                height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                <g transform="rotate(180 12 12)">
                                    <path fill="currentColor"
                                        d="M12 19.575q-.2 0-.375-.063q-.175-.062-.325-.212l-6.6-6.6q-.3-.3-.3-.713q0-.412.3-.712t.7-.3q.4 0 .7.3l4.9 4.9v-11.2q0-.425.288-.7Q11.575 4 12 4t.713.287Q13 4.575 13 5v11.175l4.9-4.9q.3-.3.7-.3q.4 0 .7.3q.3.3.3.712q0 .413-.3.713l-6.6 6.6q-.15.15-.325.212q-.175.063-.375.063Z" />
                                </g>
                            </svg></label>
                        <div class="content">
                            <p>
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet, tenetur quasi rerum
                                veritatis pariatur obcaecati, aspernatur officia sit vero necessitatibus sapiente
                                corporis harum animi dolor sequi eaque in, accusantium minus?
                            </p>
      </div>
</div>

css

.card{
  position: relative;
  height: 392px;
  background: #000;
  padding: 8px;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
  box-shadow: 2px 1px 20px #03a9c185;
  border: 2px solid #03a9c185;
  margin-top: -33px;
}
.card .card-inside{
  width: 449px;
  height: 370px;
  position: relative;
  background: linear-gradient(180deg, #eaeaea 0%, #f3f3f3 100%);
  border-radius: 65px;
  overflow: hidden;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.375);
  box-shadow: 4px 4px 4px #000000c4;
  z-index: 10;
}
.card-inside img{
  position: absolute;
  height: 380px;
  bottom: 0;
  top: 0;
  right: -50px;
}
.text-box{
  z-index: 5;
  position: absolute;
  background: #ffffff52;
  border-radius: 50px;
  padding: 4px 20px;
  top: 18px;
  left: 16px;
  width: 35%;
  box-shadow: 4px 4px 4px #00000045;
  text-align: center;
}
.text-box h2{
  color: #0a077d;
  text-shadow: 1px 1px 2px #3b3e6f;
  font-size: 1rem;
}
.text-box h6{
  font-size: 1.2rem;
  font-weight: 600;
  color: #d1693a;
  text-shadow: 0 1px 1px black;
}
.control-btn{
  cursor: pointer;
  color: #fff;
  background: hsl(191, 90%, 40%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 2.5rem;
  position: absolute;
  display: grid;
  place-items: center;
  bottom: 9px;
  left: 6px;
  z-index: 10;
  box-shadow: 0 6px 12px hsl(191, 40%, 40%);
  transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 2.975);
}
.card input[type="checkbox"]:checked{
  appearance: none;
  position: absolute;
}
.card input[type="checkbox"]:checked ~ .card-inside{
  height: 240px;
}
.card input[type="checkbox"]:checked ~ .control-btn{
  bottom: 38%;
  transform: rotate(-180deg);
  transition: 0.7s cubic-bezier(0.075, 0.185, 0.42, 1.975);
}
.card .content{
  width: 449px;
  color: #4b4b4b;
  padding: 10px;
  text-align: right;
  margin-top: 0px;
}
.content p{
  font-size: 0.9rem;
  line-height: 1.5rem;
}

i tutaj nie wiem jak wskazać w css że chodzi mi o rozwinięcie konkretnej karty przy tym zapisie

.card input[type="checkbox"]:checked{
  appearance: none;
  position: absolute;
}
.card input[type="checkbox"]:checked ~ .card-inside{
  height: 240px;
}
.card input[type="checkbox"]:checked ~ .control-btn{
  bottom: 38%;
  transform: rotate(-180deg);
  transition: 0.7s cubic-bezier(0.075, 0.185, 0.42, 1.975);
}

 

Answer 1

Spróbuj takiego zapisu (np.: check1, check2 itd.)

[ on-line ]

<div class="card">
  <input type="checkbox" id="check1">
  ...
  <label for="check1" class="control-btn">
    ...    
  </label>
  <div class="content">
    ...
  </div>
</div>
<div class="card">
  <input type="checkbox" id="check2">
  ...
  <label for="check2" class="control-btn">
    ...      
  </label>
  <div class="content">
    ...
  </div>
</div>

 

proponuję dodać taki zapis do css

.card input[type="checkbox"] {
  display: none;
}

 

Comments

Super o to mi chodziło i teraz jeszcze czy jak będę chciała to wykorzystać w php tzn gdzie dane będą pobrane z bazy i podstawione to przy takim zapisie

<div class="card">
  <input type="checkbox" id="check2">
  ...
  <label for="check2" class="control-btn">
    ...      
  </label>
  <div class="content">
    ...
  </div>
</div>

mogę tak

$query = "SELECT * FROM coś";
                        $query_run = mysqli_query($con, $query);
                        if (mysqli_num_rows($query_run) > 0) {
                            foreach ($query_run as $row) {
?>
<div class="card">
  <input type="checkbox" id="check<?= $row['id']; ?>">
  ...
  <label for="check<?= $row['id']; ?>" class="control-btn">
    ...      
  </label>
  <div class="content">
    ...
  </div>
</div>
<?php ....

tak będzie poprawnie czy inaczej powinno się w takim przypadku robić??, kiedy będzie kilka takich kart.

---

Może być taki zapis, ale można też użyć po prostu zmiennej i inkrementować ją

(pętla hipotetyczna - na potrzeby prezentacji)

[ on-line ]

$check = 0;
for ($i=0; $i<3; $i++) { ?>
    <div class="card">
      <input type="checkbox" id="check<?= ++$check; ?>">
      ...
      <label for="check<?= $check; ?>" class="control-btn">
        ...      
      </label>
      <div class="content">
        ...
      </div>
    </div>
  ';
<?php } ?>

 

proponuje użyć zmienną, bo po "dłuższym używaniu" bazy nie wiadomo co będzie zawierać $row['id']; 

---

ok dziękuje za podpowiedz