Erweitern und ausblenden mit css

Habe ich erstellt in Jquery eine Funktion zum erweitern und reduzieren Sie den Inhalt eines div. Aber jetzt möchte ich es machen nur mit CSS und auch ein Bild von einem Pfeil, wie diese

Live - jsFiddle

Ich würde auch gerne beseitigen, die diesen span-tag und halten nur das div-Element und dessen Inhalt

Hier der code, den ich bisher haben.

<div class='showHide'>
    <span class='expand'><span id="changeArrow">&#8593;</span>Line expand and collapse</span>
    <fieldset id="fdstLorem">Lorem ipsum...</fieldset>
</div>

$(document).ready(function () {
    $('.showHide>span').click(function () {
        $(this).next().slideToggle("slow");
        return false;
    });
    $(".showHide>span").toggle(function () {
        $(this).children("#changeArrow").text("↓");
    }, function () {
        $(this).children("#changeArrow").text("↑");
    });
});

Das können Sie nicht, nur in css.
Ich dachte, ich könnte. Wie könnte also mache ich es zumindest mit diesen Pfeil und das entfernen unnötiger html?
schauen Sie, diese REINE CSS-Lösung: stackoverflow.com/questions/9100344/...
Es ist möglich, mit reinem CSS.
jsfiddle.net/thurstanh/emtAm/2

InformationsquelleAutor gbvisconti | 2014-09-30

Hier ist die Art, wie ich es mache, es ist einfach und sauber, im Vergleich zu Dinge tun, mit Checkboxen, sondern erweitert nur auf hover oder click&halten Sie (was ist gut für touch)...

<style>

.collapse-able {
    height: 1.2rem;
    overflow: hidden;
}

.collapse-able:active, .collapse-able:hover {
    height: auto;
}

</style>

mit

<div class="collapse-able">
  <h1> The first line will always show </h1>
  </br> 
  But what's underneath won't until hover or click and drag. Which is neat.
</div>

InformationsquelleAutor liljoshu

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#myImg1, #myImg2, #myImg3 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg1:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,1); /* Black w/opacity */
}

/* Modal Content (image) */
.modal-content {
margin-left: 19px;
left: 210px;
    bottom: 52px;
   height: 100%;
  border-radius: 0;
  max-width:1100px;


   }

/* The Close Button */
.close {
    position: absolute;

     position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 80px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

</style>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<div class="container">

  <div class="row">
    <div class="col-sm-4">
      <img id="myImg1" src="http://celebwallpapers.net/wp-content/uploads/2017/11/breaking-bad-wallpapers-breaking-bad-wallpapers-for-mac-desktop-of-breaking-bad-wallpapers.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="myfunc(src);">

    </div>
    <div class="col-sm-4">
      <img id="myImg2" src="https://www.pixelstalk.net/wp-content/uploads/images1/Desktop-Free-Download-Breaking-Bad-Wallpaper.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="myfunc(src);">

    </div>
    <div class="col-sm-4">
      <img id="myImg3" src="http://images.indianexpress.com/2017/09/breaking-bad-card.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="myfunc(src);">

    </div>



<!-- The Modal -->
<div id="myModal" class="modal">

  <img class="modal-content" id="img01">
  <span class="close" onclick="myfunc1();">&times;</span>

</div>
<script>
function myfunc(src)
{

document.getElementById('myModal').style.display = "block";
document.getElementById('img01').src=src;

}
function myfunc1()
{
document.getElementById('myModal').style.display = "none";
}



</script>
</body>
</html>

InformationsquelleAutor Avik Chakraborty

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.