Toggle Funktiuon - Normalen Button durch CSS Button ersetzen

Odo · 15 März 2007

Hi Leute,

ich möchte gern einen normalen Button mit einem CSS Button ersetzen, weiß nur nicht wie man das am besten löst, da der css button nur mit einem link gefüttert werden kann. für die toggle funktion ist aber kein link von nöten.

http://www.semper-fidelis-delta.de/Test4.html

Code:

<html>
<head>
<title>Test4</title>
<meta name="author" content="Pete">
<style type="text/css" media="all"><!--
    /* ************************************ */

#list2 dl{
margin:0;
padding:5px;
list-style:none;
white-space: nowrap;}

#list2 dt{display:inline;}

#list2 a{
color:#7F7F7F;
font:normal 14px verdana,sans-serif;
padding:5px 10px 5px 10px;
text-decoration:none;
background-color:#FFFFEA;
border:1px solid #BFBFBF;
border-left:1px solid #BFBFBF;
text-align:center;}

#list2 a:hover{
color:#2F2F2F;
background-color:#FF6464;
border:1px solid #4F4F4F;
border-left:1px solid #4F4F4F;
text-align:center;}}






--></style>



<script type="text/javascript">
function toggleMe(a,x){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block";
x.value='Button für verstecktes Element';
}
else{
e.style.display="none";
x.value='Button für verstecktes Element!'
}
return true;
}
</script>



</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">


<dt id="list2">
<div align="center"><a href="#">Button für verstecktes Element</a></div></dt></dl>


<input type="button" onclick="return toggleMe('para1',this)" value="Button für verstecktes Element">
<br>
<p id="para1" style="display:none">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFE8DD" bgcolor="#FFE8DD" width=100% height="500">
  <tr>
    <td valign="top" width=100%>
    <hr noshade color="#4F4F4F" size="1">
<font face=verdana size=3 color="#FF4242">Platz für das Skript</b></font>
   </td>
  </tr>
</table>
</p>
 <br>
<hr noshade color="#4F4F4F" size="1">















</font> </div>









</body>
</html>

Frank · 15 März 2007

Probier es mal so, dürfte etwas besser sein ;)

Zur besseren Übersicht teile ich es mal in die schipsel ein

CSS

Code:

.button
{
  display:block;
  width:200px;
  height:20px;
  background-color:#333333;
  color:#aaaaaa;
}
#hiddenelement
{
  display:none;
}

JavaScript

Code:

function toggle(element)
{
  var neuer_status;
  if(document.getElementById(element).style.display == "hidden")
    neuer_status = 'block'
  else
    neuer_status = 'hidden'
  document.getElementById(element).style.display = neuer_status;
}

HTML

HTML:

<a href="javascript:toggle('hiddenelement');" class="button">
    Button f&uuml;r verstecktes Element
</a>
<div id="hiddenelement">
    Inhalt des versteckten Elementes
</div>

Odo · 15 März 2007

Gesagt getan

Ergebnis sieht dann so aus

http://www.semper-fidelis-delta.de/Test41.html

funzt leider nicht :sad: habe ich einen fehler gemacht ? hier der code

Code:

<html>
<head>
<title>Test4</title>
<meta name="author" content="Pete">
<style type="text/css" media="all"><!--
    /* ************************************ */

.button
{
  display:block;
  width:200px;
  height:20px;
  background-color:#333333;
  color:#aaaaaa;
}
#hiddenelement
{
  display:none;
}






--></style>



<script type="text/javascript">
function toggle(element)
{
  var neuer_status;
  if(document.getElementById(element).style.display == "hidden")
    neuer_status = 'block'
  else
    neuer_status = 'hidden'
  document.getElementById(element).style.display = neuer_status;
}
</script>



</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">


<a href="javascript:toggle('hiddenelement');" class="button">
    Button f&uuml;r verstecktes Element
</a>
<div id="hiddenelement">
    Inhalt des versteckten Elementes
</div>









</body>
</html>

und muss ich den hover button effekt aufgeben ? würde wenn es geht gern den bisherigen style beibehalten

http://www.semper-fidelis-delta.de/Test4.html

Frank · 15 März 2007

sry mein fehler *flush*

Hier jetzt der Funktionierende Code

HTML:

<html>
<head>
<script type="text/javascript">
<!--
function toggle(element)
{
  doc = document.getElementById(element);
  if(doc.style.display == 'block')
    doc.style.display = 'none';
  else
    doc.style.display = 'block';

}
-->
</script>
<style type="text/css">
<!--
.button
{
  display:block;
  width:200px;
  height:20px;
  background-color:#333333;
  color:#aaaaaa;
}
#hiddenelement
{
  display:none;
  border:1px solid black;
}
-->
</style>
</head>
<body>
<a href="javascript:toggle('hiddenelement');" class="button">
    Button f&uuml;r verstecktes Element
</a>
<div id="hiddenelement">
    Inhalt des versteckten Elementes
</div>
</body>
</html>

Hab ihn bei mir getestet.

Auf deinen Hovereffekt musst du natürlich nicht verzichten, nimm in css einfach die pseudoklasse hover

Odo · 15 März 2007

Jetzt klappt es.... fast :mrgreen: Soweit schonmal vielen Dank !

http://www.semper-fidelis-delta.de/Test4.html

Ich würde gern drei versteckte elemente auf der seite implementieren.

nur wenn ich es lade, sind bereits 2 der 3 hiddenelemente geöffnet und das soll natürlich nich sein

ferner würde ich gerne, dass das hiddenelement im eingeklappten zustand nur den platz für den button einnimmt und nicht wie es im mom ist, das bereits der platz des hiddenelementes gebraucht wird. weißte wie ich das meine ?

HTML:

<html>
<head>
<script type="text/javascript">
<!--
function toggle(element)
{
  doc = document.getElementById(element);
  if(doc.style.display == 'block')
    doc.style.display = 'none';
  else
    doc.style.display = 'block';

}
-->
</script>
<style type="text/css">
<!--
.button
{
  display:block;
  width:250px;
  height:20px;
  background-color:#FDF9D9;
  color:#4F4F4F;
}

}
a:focus,
a:hover,
a:active{
    background-color:#F9EC7D;
    color:#0000DF;
}

#hiddenelement1
{
  display:none;
  border:1px solid black;
}
}

#hiddenelement2
{
  display:none;
  border:1px solid black;
}
}

#hiddenelement3
{
  display:none;
  border:1px solid black;
}
-->
</style>
</head>
<body>


Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>


<div align="center"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#5F5F5F" height="500" width="1000">
  <colgroup>
    <col width="334">
    <col width="334">
    <col width="334">
  </colgroup>
  <tr>
    <td style="width:334px">
<p style="border-left-style:solid; border-left-width:thin; border-color:#FF4242">

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFE8DD" bgcolor="#FFE8DD">
  <colgroup>
    <col width="334">
  </colgroup>
  <tr>
    <td>
<div align="center"><font face=verdana size=5 color="#4F4F4F"><b>Text</b></font></div>
   </td>
  </tr>
  <tr>
    <td>
<a href="javascript:toggle('hiddenelement1');" class="button">
    <div align="center">Button f&uuml;r verstecktes Element </div>
</a>
   </td>
  </tr>
  <tr>
    <td>
<div id="hiddenelement1">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFE8DD" bgcolor="#FFE8DD" height="500">
  <colgroup>
    <col width="334">
  </colgroup>
  <tr>
    <td valign="top">
    <hr noshade color="#4F4F4F" size="1">
<font face=verdana size=3 color="#FF4242"><b>Inhalt des versteckten Elementes</b></font>
   </td>
  </tr>
</table>
</div>
   </td>
  </tr>
</table>
</p>





  </td>  <td style="width:334px">


    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFE8DD" bgcolor="#FFE8DD">
  <colgroup>
    <col width="334">
  </colgroup>
  <tr>
    <td>
<div align="center"><font face=verdana size=5 color="#4F4F4F"><b>Text</b></font></div>
   </td>
  </tr>
  <tr>
    <td>
<div align="center"><a href="javascript:toggle('hiddenelement2');" class="button">
    Button f&uuml;r verstecktes Element
</a></div>
   </td>
  </tr>
  <tr>
    <td>
<div id="hiddenelement2">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFE8DD" bgcolor="#FFE8DD" height="500">
  <colgroup>
    <col width="334">
  </colgroup>
  <tr>
    <td valign="top">
    <hr noshade color="#4F4F4F" size="1">
<font face=verdana size=3 color="#FF4242"><b>Inhalt des versteckten Elementes</b></font>
   </td>
  </tr>
</table>
</div>
   </td>
  </tr>
</table>



  </td>  <td style="width:334px">


    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFE8DD" bgcolor="#FFE8DD">
  <colgroup>
    <col width="334">
  </colgroup>
  <tr>
    <td>
<div align="center"><font face=verdana size=5 color="#4F4F4F"><b>Text</b></font></div>
   </td>
  </tr>
  <tr>
    <td>
<a href="javascript:toggle('hiddenelement3');" class="button">
    <div align="center">Button f&uuml;r verstecktes Element </div>
</a>
   </td>
  </tr>
  <tr>
    <td>
<div id="hiddenelement3">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FFE8DD" bgcolor="#FFE8DD" height="500">
  <colgroup>
    <col width="334">
  </colgroup>
  <tr>
    <td valign="top">
    <hr noshade color="#4F4F4F" size="1">
<font face=verdana size=3 color="#FF4242"><b>Inhalt des versteckten Elementes</b></font>
   </td>
  </tr>
</table>
</div>
   </td>
  </tr>
</table>


    </td>
  </tr>
</table>     </div>

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>








</body>
</html>

Bin für ratschläge offen.

Toggle Funktiuon - Normalen Button durch CSS Button ersetzen

Odo

Neues Mitglied

Frank

Neues Mitglied

Odo

Neues Mitglied

Frank

Neues Mitglied

Odo

Neues Mitglied

Neueste Beiträge