Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8

Thread: Toggle button

  1. #1
    Member Elvedin's Avatar
    Join Date
    Jan 2013
    Location
    Bosnia And Herzegowina
    Posts
    78
    Member #
    35009

    Toggle button

    Hello

    I wanna make an toggle button.

    Well there should be an button named hmmm something like "PUSH ME" , and when some1 press this button it should toggle under some test .. Something like "HELLO" , but after a person did press the button , the text inside the button"PUSH ME" should be changed to "PUSH ME BACK" , and when he press the button "PUSH ME BACK" the text "HELLO" should disappear.

    I dont know if you understand me but i hope you do.

    So i found some useful codes , but those two functions cant work together , so something should be changed inside the codes, can some1 help me around ?

    Here they are :

    TOGGLE TEXT UNDER BUTTON
    Code:
     <button class="toggle">PUSH ME</button>
    <p class="toggle1">HELLO</p>
    Code:
    <script>$("button.toggle").click(function () {
    $("p.toggle1").toggle();
    });
    </script>
    TOGGLE TEXT INSIDE BUTTON

    Code:
     <button class="toggle">PUSH ME</button>
    Code:
    <script>        $("button.toggle").click(function () {
                $(this).text(function(i, v){
                   return v === 'PUSH ME' ? 'PUSH ME BACK' : 'PUSH ME'
                })
            });
        </script>
    So how to make them working together ?

    Thank you

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Code:
    $("button.toggle").click(function () {
    $("p.toggle1").toggle();
    $(this).text(function(i, v){
    return v === 'PUSH ME' ? 'PUSH ME BACK' : 'PUSH ME'
    });
    });
    Maybe try this?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member Elvedin's Avatar
    Join Date
    Jan 2013
    Location
    Bosnia And Herzegowina
    Posts
    78
    Member #
    35009
    Well, I found another solution and i got it working like i wanted, but now there is another problem.
    When i open my page all of those toggle should be CLOSED , after i click on button then it should be opened and the text should be shown.

    Right now its already shown and when i press the button it will hide it, so how to make it first to bi hiden and after click on button to be shown.

    Here are the codes i am using now :

    Code:
    <div id="webstranica">  <div class="toggle" onclick="toggle(this)"><a href="#index" >- Šta je to web stranica?</a></div>
    <p class="toggle1">HELLO</p>
    <script type="text/javascript">
    function toggle (t) {
    if (t.childNodes[0].innerHTML == "+ Šta je to web stranica?") {
        t.childNodes[0].innerHTML = "- Šta je to web stranica?";
    } else {
        t.childNodes[0].innerHTML = "+ Šta je to web stranica?";
    }
    }
    </script>
    <script>
    $("div.toggle").click(function () {
    $("p.toggle1").toggle();
    });
    </script>
    </div>

  5. #4
    Member Elvedin's Avatar
    Join Date
    Jan 2013
    Location
    Bosnia And Herzegowina
    Posts
    78
    Member #
    35009
    Now i got another problem, well i used the scripts for every question on my page.

    My code looks like this :

    Code:
    <div id="pitanje-1">
      <div class="toggle" onclick="toggle(this)"><a href="#index" >- Šta je to web stranica?</a></div>
    <p id="toggle-1">Web stranica je skup tekstova, slika, video prezentacija i ostalih sadržaja i programskog koda koji određuje na koji način će se taj sadržaj prikazati u internet/Web pregledniku (Mozilla, 
    
    
    Chrome, Safari…).</p>
    <script type="text/javascript">
    function toggle (t) {
    if (t.childNodes[0].innerHTML == "+ Šta je to web stranica?") {
        t.childNodes[0].innerHTML = "- Šta je to web stranica?";
    } else {
        t.childNodes[0].innerHTML = "+ Šta je to web stranica?";
    }
    }
    </script>
    <script>
    $("div.toggle").click(function () {
    $("p#toggle-1").toggle();
    });
    </script>
    </div>
    
    
    <br>
    
    
    <div id="pitanje-2">
      <div class="togglea" onclick="toggle(this)"><a href="#index" >- Šta je web hosting?</a></div>
    <p id="toggle-1a">Server (internet poslužitelj) je računar, odličnih performansi, velikog diskovnog prostora, radne memorije i brzine, koji je konstantno spojen na internet. Obzirom da su serveri stalno spojeni 
    
    
    na internet imaju dodijeljene stalne IP (internet Protocol) adrese. Kada u internet preglednik (Mozilla, Safari, Chrome…) upišete IP adresu nekog servera, učitat će se internet stranica koja se nalazi na tom 
    
    
    serveru. Obično se upisuju domene koje odgovaraju IP adresi na serveru. Primjer, kada u internet preglednik upišete www.webpage.ba, otvara se sadržaj internet stranice na serveru sa specifičnom IP adresom koja 
    
    
    pokazuje na našu domenu. Prostor koji se nalazi na disku servera naziva se serverski prostor. Danas je moguće zakupiti i manji serverski prostor koji odgovara veličini i strukturi stranice koja će biti 
    
    
    smještena na serveru. Današnji serveri sadrže stotine i hiljade serverskih prostora, izdijeljenih po različitim veličinama, namjenama i performansama.</p>
    <script type="text/javascript">
    function toggle (t) {
    if (t.childNodes[0].innerHTML == "+ Šta je web hosting?") {
        t.childNodes[0].innerHTML = "- Šta je web hosting?";
    } else {
        t.childNodes[0].innerHTML = "+ Šta je web hosting?";
    }
    }
    </script>
    <script>
    $("div.togglea").click(function () {
    $("p#toggle-1a").toggle();
    });
    </script>
    </div>
    So when i use those scripts 2 times they mix , so right now i got those two different questions with different answers, but when i click on one question to toggle the answer , then the other questions renemes like the first one, i hope you understand me. So i think i need to make something like class or id to those codes :

    Code:
    <script type="text/javascript">
    function toggle (t) {
    if (t.childNodes[0].innerHTML == "+ Šta je web hosting?") {
        t.childNodes[0].innerHTML = "- Šta je web hosting?";
    } else {
        t.childNodes[0].innerHTML = "+ Šta je web hosting?";
    }
    }
    </script>
    Something like this :

    Code:
    <script>
    $("div.togglea").click(function () {         /      THIS HERE [  $("div.togglea")  ]
    $("p#toggle-1a").toggle();                    /      THIS HERE [  $("p#toggle-1a")  ]
    });
    </script>
    I hope you understand me. Thank you

  6. #5
    Member Elvedin's Avatar
    Join Date
    Jan 2013
    Location
    Bosnia And Herzegowina
    Posts
    78
    Member #
    35009
    Any solution to fix that problem guys ? please .. Thank you

  7. #6
    Member Elvedin's Avatar
    Join Date
    Jan 2013
    Location
    Bosnia And Herzegowina
    Posts
    78
    Member #
    35009
    Okay , lets make it easy...

    How do add class or id to this java script :

    Code:
    <script type="text/javascript">
    function toggle (t) {
    if (t.childNodes[0].innerHTML == "+ Šta je to web stranica?") {
        t.childNodes[0].innerHTML = "- Šta je to web stranica?";
    } else {
        t.childNodes[0].innerHTML = "+ Šta je to web stranica?";
    }
    }
    </script>
    Like here it is :

    Code:
    <script>
    $("div.toggle").click(function () {            / THIS HERE
    $("p#toggle-1").toggle();                   / THIS HERE
    });
    </script>
    Thank you

  8. #7
    Member Elvedin's Avatar
    Join Date
    Jan 2013
    Location
    Bosnia And Herzegowina
    Posts
    78
    Member #
    35009
    Bump.... Do anyone know how to add class or id omg...

  9. #8
    Junior Member
    Join Date
    Oct 2013
    Posts
    3
    Member #
    37478
    nice discusion..!

    thanxx to all


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:59 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com