Ergebnis 1 bis 4 von 4
Like Tree1Likes
  • 1 Post By kkapsner

Thema: Box ein-/ausblenden

  1. #1
    TwoPlayer ist offline Grünschnabel
    registriert
    13-03-2015
    Beiträge
    1

    Question Box ein-/ausblenden

    Guten Tag,

    ich habe ein gekauftes Web-Design und wollte dort nun für das Impressum eine eigene Box hinzufügen, welche ich durch einen Klick auf Impressum erscheinen lasse, da ich nciht viel von CSS und Javascript verstehe, nutze ich die CSS-Angaben des Design und habe mir ein JQuery Script zum ein-/ausblenden besorgt, nun passiert aber nichts, wenn ich auf den Link klicke.
    Darum hoffe ich jemand kann mir sagen, was ich falsch mache.


    Der problematische Teil meiner Index.html:
    HTML-Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                <script type="text/javascript">
                $(document).ready(function(){
                /* Hier der jQuery-Code */
                    $('#einausblenden').click(function(){
                        $('#Impressum').toggleClass();
                    })
                });
                </script>
            <div style="display:none" id="Impressum">
            <div class="page show">
                <div>
                    <a href="/" class="close-page">×</a>
                    <div class="content">
                        <div class="pages" id="about" style="display: block;">
                            <div class="about">
                            <h1>Impressum</h1>
                            <h2>Angaben gemäß § 5 TMG:</h2>
                            <p>Nikolas Schätzl<br />
                                Taufkirchener Str. 22<br />
                                84307 Eggenfelden
                            </p>
                            <h2>Kontakt:</h2>
                            <table>
                                <tr>
                                    <td>Telefon:</td>
                                    <td>+49-872112 89 12 40</td>
                                </tr>
                                <tr>
                                    <td>Telefax:</td>
                                    <td>+49-872112 89 12 49</td></tr>
                                <tr>
                                    <td>E-Mail:</td>
                                    <td>admin@tzimon.net</td>
                                </tr>
                            </table>
                            <p>*</p>
                            <h1>Haftungsausschluss (Disclaimer)</h1>
                            <p><strong>Haftung für Inhalte</strong></p> <p>Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p> <p><strong>Haftung für Links</strong></p> <p>Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p> <p><strong>Urheberrecht</strong></p> <p>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p><p>*</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    Das main.css des gekauften Templates:
    Code:
    /*
     * Main Stylesheet
     */
    
    /* Fonts */
    @import 'http://fonts.googleapis.com/css?family=Lato:100,300,400,700';
    @import 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css';
    
    /* Basic required libraries */
    @import 'lib/reset.css';
    @import 'lib/swipebox.css';
    
    /* Animations */
    @import 'animations/circular/circular.css';
    @import 'animations/scaling/scaling.css';
    
    /* Colors */
    @import '../colors/cool/cool.css';
    @import '../colors/dark/dark.css';
    @import '../colors/flat/flat.css';
    
    body {
      font: normal 400 14px/1.7 'Lato', sans-serif;
      padding: 0;
      margin: 0;
    }
    
    /* Loader */
    .loader {
      display: none;
      position: absolute;
      top: 0;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    
    .loader.show {
      display: block;
    }
    
    /* Main window */
    .main {
      width: 350px;
      height: 470px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -230px 0 0 -175px;
    }
    
    /* Hide Main Window */
    .main.hide {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      -webkit-transform: scale(0.2, 0.2);
      -moz-transform: scale(0.2, 0.2);
      -o-transform: scale(0.2, 0.2);
      transform: scale(0.2, 0.2);
    }
    
    /* Main Info */
    .main .main_info {
      text-align: center;
      padding-top: 70px;
      opacity: 0;
    }
    
    /* Site headline */
    .main .main_info h1 {
      font-size: 2em;
      font-weight: 400;
    }
    
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
      .main {
        margin: -230px 0 0 -175px;
        -webkit-transform: scale(0.75, 0.75);
        -moz-transform: scale(0.75, 0.75);
        -o-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
      }
    }
    
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
      .main {
        margin: -230px 0 0 -175px;
        -webkit-transform: scale(0.75, 0.75);
        -moz-transform: scale(0.75, 0.75);
        -o-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
      }
    }
    
    
    /* Animate avatar */
    .main.animate .circle {
      -webkit-animation: avatar 1s forwards;
      -moz-animation: avatar 1s forwards;
      animation: avatar 1s forwards;
      -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
      -moz-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
      animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .main.animate .main_info {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      padding-top: 30px;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    
    /* Avatar Circle */
    .main .circle {
      width: 200px;
      height: 200px;
      margin: 85px auto;
      background: url('../images/profile.jpg') no-repeat;
      border-radius: 100%;
      behavior: url(assets/stylesheet/lib/PIE.htc);
      -webkit-transform: scale(0.5, 0.5);
      -moz-transform: scale(0.5, 0.5);
      -o-transform: scale(0.5, 0.5);
      transform: scale(0.5, 0.5);
    }
    
    /* Description overlay */
    .main .circle .description {
      line-height: 200px;
      vertical-align: middle;
      text-align: center;
      font-weight: 100;
      font-size: 2em;
      color: white;
      display: none;
      border-radius: 100%;
      behavior: url(assets/stylesheet/lib/PIE.htc);
    }
    
    /* Triggers */
    .main .circle .triggers {
      display: block;
      width: 52px;
      height: 52px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -29px;
      margin-left: -29px;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    
    /* Trigger Items */
    .main .circle .triggers li.trigger-item {
      display: block;
      position: absolute;
      text-align: center;
      -webkit-transform: rotate(0deg) translate(0, 0);
      -moz-transform: rotate(0deg) translate(0, 0);
      -o-transform: rotate(0deg) translate(0, 0);
      transform: rotate(0deg) translate(0, 0);
    }
    
    /* Trigger Link */
    .main .circle .triggers li.trigger-item a {
      width: 46.2px;
      height: 46.2px;
      text-decoration: none;
      color: white;
      display: block;
      font-size: 17.6px;
      border-radius: 100% 100% 100% 0;
      behavior: url(assets/stylesheet/lib/PIE.htc);
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      -webkit-transform: rotate(-45deg) scale(0.9, 0.9);
      -moz-transform: rotate(-45deg) scale(0.9, 0.9);
      -o-transform: rotate(-45deg) scale(0.9, 0.9);
      transform: rotate(-45deg) scale(0.9, 0.9);
    }
    .main .circle .triggers li.trigger-item a:hover {
      border-radius: 100%;
      behavior: url(assets/stylesheet/lib/PIE.htc);
      -webkit-transform: translate3d(0, 0, 0) rotate(-45deg) scale(1, 1);
      -moz-transform: translate3d(0, 0, 0) rotate(-45deg) scale(1, 1);
      -o-transform: translate3d(0, 0, 0) rotate(-45deg) scale(1, 1);
      transform: translate3d(0, 0, 0) rotate(-45deg) scale(1, 1);
    }
    
    /* Trigger icon */
    .main .circle .triggers li.trigger-item a i {
      padding: 14px 12px;
      display: inline-block;
      width: 1.25em;
      text-align: center;
      -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
      -moz-transform: translate3d(0, 0, 0) rotate(45deg);
      -o-transform: translate3d(0, 0, 0) rotate(45deg);
      transform: translate3d(0, 0, 0) rotate(45deg);
    }
    
    /* Basic page Styles */
    .page {
      position: absolute;
      width: 550px;
      left: 50%;
      margin-left: -275px;
      top: 50%;
      margin-top: -300px;
      max-height: 600px;
      overflow: auto;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      -webkit-transform: scale(0.3, 0.3);
      -moz-transform: scale(0.3, 0.3);
      -o-transform: scale(0.3, 0.3);
      transform: scale(0.3, 0.3);
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .page.show {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      -webkit-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
    }
    
    /* Page on mobile devices */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      .page {
        width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        top: 0;
        left: 0;
        position: absolute;
      }
    }
    
    /* Close button */
    .page .close-page {
      cursor: pointer;
      float: right;
      margin-right: 20px;
      margin-top: 20px;
      font-size: 2.5em;
      font-weight: 100;
      line-height: .5em;
      text-decoration: none;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .page .close-page:hover {
      font-weight: 300;
      -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
      -moz-transform: translate3d(0, 0, 0) rotate(45deg);
      -o-transform: translate3d(0, 0, 0) rotate(45deg);
      transform: translate3d(0, 0, 0) rotate(45deg);
    }
    
    /* Page content area */
    .page .content {
      padding: 20px;
      line-height: 2;
    }
    
    /* Page title */
    .page .content h1 {
      font-size: 2em;
      font-weight: 300;
    }
    .page .content h1:before {
      border-bottom: 2px solid #333;
      content: '';
      position: absolute;
      padding: 25px 20px;
    }
    
    .page .content h2 {
      font-size: 1.6em;
      font-weight: 300;
    }
    .page .content h3 {
      font-size: 1.2em;
      font-weight: 300;
    }
    .page .content p {
      padding: 10px 0;
    }
    .page .content label {
      display: block;
    }
    .page .content input,
    .page .content textarea {
      padding: 10px 15px;
      border: 1px solid #ccc;
      width: 100%;
      outline: none;
      font-size: 14px;
      z-index: 1;
      position: relative;
      border-radius: 6px;
      behavior: url(assets/stylesheet/lib/PIE.htc);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .page .content textarea {
      width: 100%;
      height: 100px;
      resize: none;
    }
    .page .content img {
      max-width: 100%;
    }
    .page .content .confirm {
      display: none;
    }
    
    /* Error message */
    .page .content .error_message {
      display: none;
      padding: 5px 10px;
      font-size: .9em;
      z-index: 1;
      position: relative;
      border-radius: 6px;
      behavior: url(assets/stylesheet/lib/PIE.htc);
    }
    
    /* Swipeobx caption */
    #swipebox-caption {
      font-size: 1.6em;
      line-height: 50px;
      font-weight: 300;
    }
    
    /* Swipebox buttons */
    #swipebox-close,
    #swipebox-prev,
    #swipebox-next {
      font-size: 2.5em;
      font-weight: 100;
      line-height: 50px;
      text-decoration: none;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    #swipebox-close:hover,
    #swipebox-prev:hover,
    #swipebox-next:hover {
      font-weight: 300;
    }
    
    /* Resume page */
    .resume h2 i {
      margin-right: 5px;
    }
    .resume .detail {
      display: inline-block;
      width: 30%;
      text-align: right;
      padding-right: 20px;
      vertical-align: top;
      box-sizing: border-box;
      font-size: .9em;
      line-height: 2.3em;
    }
    .resume .detail span {
      color: #999;
      display: block;
    }
    .resume .info {
      display: inline-block;
      width: 65%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .resume .progress {
      height: 15px;
      margin-top: 5px;
      position: relative;
      border-radius: 6px;
      behavior: url(assets/stylesheet/lib/PIE.htc);
    }
    .resume .progress span {
      display: block;
      height: 15px;
      position: relative;
      z-index: 1;
      border-radius: 6px;
      behavior: url(assets/stylesheet/lib/PIE.htc);
    }
    
    /* Portfolio Page */
    .portfolio img {
      opacity: 0.7;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
      border-radius: 3px;
      behavior: url(assets/stylesheet/lib/PIE.htc);
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .portfolio img:hover {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      opacity: 1;
    }
    
    /* IE STYLES */
    .ie .resume .progress {
      background: none !important;
    }
    .ie .page .content .error_message {
      display: block;
      visibility: hidden;
    }
    
    .ie .main .circle .triggers li.trigger-item a {
      border-radius: 100%;
    }
    
    /*
     * Avatar Animnation Keyframe
     */
    @-webkit-keyframes avatar {
      from {
        opacity: 0;
        -webkit-transform: scale(0.5, 0.5);
        -moz-transform: scale(0.5, 0.5);
        -o-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
      }
      to {
        opacity: 1;
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
      }
    }
    @-moz-keyframes avatar {
      from {
        opacity: 0;
        -webkit-transform: scale(0.5, 0.5);
        -moz-transform: scale(0.5, 0.5);
        -o-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
      }
      to {
        opacity: 1;
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
      }
    }
    @keyframes avatar {
      from {
        opacity: 0;
        -webkit-transform: scale(0.5, 0.5);
        -moz-transform: scale(0.5, 0.5);
        -o-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
      }
      to {
        opacity: 1;
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
      }
    }
    Ich hoffe jemand kann mir helfen,
    Gruß,
    TwoPlayer

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Box ein-/ausblenden

    .toggleClass() ist einfach die falsche Funktion (und erwartet zudem einen Parameter: .toggleClass() | jQuery API Documentation ).
    Verwende einfach .toggle().

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.944

    AW: Box ein-/ausblenden

    *beide Beiträge freigeschaltet*
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Box ein-/ausblenden

    Mist - ich hatte nur das Duplikat freigeschaltet, das ich dann gelöscht hab'...
    mikdoe likes this.

Ähnliche Themen

  1. Div ein- / ausblenden
    Von @Cyboarg im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-05-2010, 13:05
  2. DIV ausblenden
    Von sensemann im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 13-12-2009, 19:11
  3. IE6 & <tr> ausblenden?
    Von NoboDev im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 14-05-2008, 14:51
  4. Div ein/ausblenden
    Von trakhath im Forum JavaScript
    Antworten: 36
    Letzter Beitrag: 10-01-2007, 12:59
  5. <tr> -s ausblenden
    Von joya im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 14-06-2005, 15:38

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •