• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

css type="checkbox" wybranie kokretnego ??

VPS Starter Arubacloud
0 głosów
185 wizyt
pytanie zadane 8 stycznia 2023 w HTML i CSS przez gatka84 Bywalec (2,150 p.)

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);
}

 

1 odpowiedź

+1 głos
odpowiedź 8 stycznia 2023 przez VBService Ekspert (250,450 p.)
wybrane 8 stycznia 2023 przez gatka84
 
Najlepsza

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;
}

 

komentarz 8 stycznia 2023 przez gatka84 Bywalec (2,150 p.)

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.

komentarz 8 stycznia 2023 przez VBService Ekspert (250,450 p.)

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']wink

1
komentarz 8 stycznia 2023 przez gatka84 Bywalec (2,150 p.)
ok dziękuje za podpowiedz

Podobne pytania

+2 głosów
0 odpowiedzi 505 wizyt
pytanie zadane 21 grudnia 2015 w HTML i CSS przez Schizohatter Nałogowiec (39,600 p.)
+1 głos
1 odpowiedź 135 wizyt
pytanie zadane 21 września 2021 w HTML i CSS przez Doge Gaduła (3,320 p.)
+1 głos
1 odpowiedź 121 wizyt

92,416 zapytań

141,222 odpowiedzi

318,985 komentarzy

61,831 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...