Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Toggle button

Featured Replies

Hello

 

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 :

 

<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>

 

Second thing :

 

Now i got another problem, well i used the scripts for every question on my page.

My code looks like this :

 

<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 :

 

<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 :

 

<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

 

 

I'm a bit confused about what exactly you are trying to do but it looks like you are assigning the toggle function to the onclick event on the div twice: Inline with this:

<div class="toggle" onclick="toggle(this)"><a href="#index" >- Šta je to web stranica?</a></div>

and from js with this:

$("div.toggle").click(function () {
$("p.toggle1").toggle();
});

Also if you want to change the text in the toggle1 paragraph there is nothing in your code that adds innerHTML to that element as only the link is a childnode of the toggle div.

  • Author

I think you didnt understand me , the text for p.toggle1 is here :

 

<p class="toggle1">HELLO</p>

And its working good.. I will try to explain you better ..

 

Well everything is fine when i am using it like toggle button , like this 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>

 

But when i want to use this code two times with different text on button and the text which is shown after i press the button , then problems happens.

What kind of problem ? Well when i open the page it looks fine , like that :

 

Vf7ZORo.jpg

 

But when i press the button/letters ( - Šta je web hosting? ) open and close only the minus and plus will change depends is toggle opened or closed.

But when i click on other button , this one ( - Šta je web hosting? ) open and close , the minus and plus will change like it should be , but the text changes to ( - Šta je web hosting? ) , like it takes the other script function from here :

 

<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>

 

So how to add classes to this script like here it is :

 

<script>
$("div.togglea").click(function () {
$("p#toggle-1a").toggle();
});
</script>

 

This $("div.togglea") and this $("p#toggle-1a") , so after i add classes i think it wont mix the sripts...

 

I hope you understand me now.

 

The only question how to add class or id to this script :

 

<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>

 

 

Thank you

I see the problem. Unfortunately I don't have much of an answer as I don't know much about js identifiers But your script has this error:


Error: ReferenceError: $ is not defined

I think it's because you have to declare identifiers as varibles (in your case on global level)

 

maybe this page can help.

Edited by Nillervision

  • Author

 

But when i click on other button , this one ( - Šta je to web stranica? ) open and close , the minus and plus will change like it should be , but the text changes to ( - Šta je web hosting? ) , like it takes the other script function from here :

 

corrected mistake..

 

Any help , just tell me how to add a class or id to this java 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>

 

Thank you!

Bump , help please... Do anyone know how to add damn class or id omg....

With an attitude like that all I can say is -------->>>>>>>> GOOGLE IT and for your obvious position to make demands this topic is locked now :o since you can't be respectful when asking for help.

Guest
This topic is now closed to further replies.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.