it-swarm.com.de

Ausblendbares Bedienfeld in HTML / CSS

Ich erstelle eine Website. Ich benötige Hilfe beim Erstellen der folgenden Funktion:

Ich möchte, dass der Link "Info" beim Klicken in ein Bedienfeld eingeblendet und beim Drücken auf "Ausblenden" im Bedienfeld wieder eingeblendet wird. Ich habe ein Diagramm unten angehängt, um zu verdeutlichen, wie es aussehen soll. Wenn der Benutzer in (1) About drückt, wird es zu (2), und wenn der Benutzer in (2) Hide drückt, wird es wieder (1).

layout

Ich würde das gerne in reinem HTML/CSS machen, wenn möglich. Weiß jemand, wie ich das machen kann?

20
xisk

Diese Antwort erklärt, wie dies vollständig erreicht werden kann: Pure CSS collapse/expand div

Hier ist ein kurzer Überblick:

<div class="FAQ">
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
        <div class="list">
            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
        </div>
</div>

CSS

/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-Java.html */

.FAQ { 
  vertical-align: top; 
  height: auto; 
}

.list {
  display:none; 
  height:auto;
  margin:0;
  float: left;
}

.show {
  display: none; 
}

.hide:target + .show {
  display: inline; 
}
.hide:target {
  display: none; 
}
.hide:target ~ .list {
  display:inline; 
}

/*style the (+) and (-) */
.hide, .show {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px 0 #666;
  text-align: center;
  text-decoration: none;
  box-shadow: 1px 1px 2px #000;
  background: #cccbbb;
  opacity: .95;
  margin-right: 0;
  float: left;
  margin-bottom: 25px;
}

.hide:hover, .show:hover {
  color: #eee;
  text-shadow: 0 0 1px #666;
  text-decoration: none;
  box-shadow: 0 0 4px #222 inset;
  opacity: 1;
  margin-bottom: 25px;
}

.list p {
  height:auto;
  margin:0;
}
.question {
  float: left;
  height: auto;
  width: 90%;
  line-height: 20px;
  padding-left: 20px;
  margin-bottom: 25px;
  font-style: italic;
}

Und die funktionierende jsFiddle:

http://jsfiddle.net/dmarvs/94ukA/4/

Wieder ist keines der oben genannten Dinge meine Arbeit, nur um zu verdeutlichen, aber es zeigt nur, wie einfach es ist, es bei Google zu finden !!

25
adaam

Sie benötigen wenig Javascript, um ein Ereignis auszulösen (show/hide div)

<a href="#"> Home </a>

<a class="right" href="javascript:toggle_messege('inline')" id='href_about'> About </a>
<br />
<a class="right hide" href="javascript:toggle_messege('none')" id='hreh_close'> (Close)</a>

<div id='div_messege' class='hide'>Hidden messege to show, Hidden messege to show Hidden messege to show Hidden messege to show</div>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>
<p>Test Test TestTestTestTestTestTestTest</p>

CSS

.right {
    float:right;
}
.hide {
    display:none
}

javascript

function toggle_messege(type) {
 document.getElementById("div_messege").style.display = type;
    document.getElementById("hreh_close").style.display = type;

}

überprüfen Sie dies zum Ausführen von Beispiel http://codepen.io/faishal/pen/IHEyw

4
Strik3r