HTML Felder innerhalb einer Seite anzeigen lassen per Klick

Arimon

Hallo und guten Morgen,
ich bin hier in dem Forum neu und habe ein paar erste Fragen. Zum Thema HTML muss ich zugeben bin ich auch recht neu, aber ich suche mir vorlagen die ich dann für mich umschreiben kann. Leider funktioniert das mit dem Vorhaben hier nicht. Vlt. könnt ihr mir auf die Sprünge helfen.
Meine Seite erstelle ich mit Webacapella 4 und Dreamweaver CC2015

Ich würde gerne für meine Seite eine Historie einbauen mit verschiedenen Jahrzehnten. Beim Klick auf ein Jahrzehnt soll dann unterhalb ein Fenster aufgehen oder angezeigt werden in dem die Historie steht.
So wie hier http://www.hamm-footwear.com/unternehmen/historie/

Vielen Dank schon mal
Gruß
Marcus

modem-kind

Hallo Marcus ..
ich habe grade wenig Zeit..aber vielleicht siehst Du Dir
das einmal an - Akkordion Effekt - http://find-templates.de.tl/akkordeon.htm

Eine andere Möglichkeit wäre eventuell über Mordal mit Pseudoselector Class :target in der CSS
Googel mal modal css .. die Beispiele sind dann meist klein können aber in der Style beliebig
in der Größe und allem anderem gestaltet werden..

okay hoffe das hilft Dir etwas ansonsten bekommst
bestimmt noch andere gute Antworten...

Gruß aus Hamburg

* { display: none; }

Arimon

Super , danke schon mal vorab

-EDIT: Das war genau richtig! TOP Danke funktioniert

modem-kind

.. schön gerne ..

ist die Webseite gesund freut sich der Mensch..
das mit dem Modal solltest Dir aber auch mal ansehen... ist interesant

Arimon

Ok, werde ich mir anschauen.
Ich habe jetzt das Problem, das die Seite nicht Ordnungsgemäß angezeigt wird sondern sich verschiebt.
Wahrscheinlich liegt es am Programm.
Hier mal der Code den ich eingefügt habe und verändert habe.
margin-top:200px; /* Außenabstand oben */ Damit wollte ich erreichen das die Kästen in der Seite an einer bestimmten Stelle anfangen. Das klappt auch allerdings wie gesagt ist alles verschoben.

CSS

<style type="text/css"><!--
/* Hier die Breite anpassen */
#akkordeon {
  width: 800px;
  overflow: hidden;
 margin-top:200px;               /* Außenabstand oben   */
  }
/* Aussehen Titel */
#akkordeon h2 {
  font-size: 20px;
  color: #009090;
  background: url(http://img.webme.com/pic/f/find-templates/rechts.png) no-repeat right; }
/* Feld um Titel */
.thema {
  cursor: pointer;
  padding: 5px 10px 5px;
  margin-bottom: 5px;
  transition: all .2s ease-in-out; }
/* ausklappbare Feld mit Inhalt */
#akkordeon .inhalt {
  display: none;
  background-color: #009090;
  padding: 15px;
  margin-bottom: 5px;
  overflow: hidden;
  border: 1px solid #c9c9c9; }
/* Farbe Titelfeld wenn ausgeklappt */
#akkordeon .open { background-color: #999999f!important; }
/* Grafik rechts wenn ausgeklappt */
#akkordeon .open h2 {
  background: url(http://img.webme.com/pic/f/find-templates/unten.png) no-repeat right; }
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {

    $('.top .thema').click(function(){
	     	if($(this).hasClass('closed')) { 
	     		$(this).addClass('open').removeClass('closed'); 
	     		$(this).siblings('.inhalt').slideDown(200);
		 	} else {
		 		$(this).addClass('closed').removeClass('open');
		 		$(this).siblings('.inhalt').slideUp(200);
		 	} 
	     });

});
</script>

Alles anzeigen

HTML Felder innerhalb einer Seite anzeigen lassen per Klick

Tags

Benutzer online in diesem Thema