Adding Javascript!

Hello @Stewie_Griffin inside Style tags you add the following code:

#myBtn {
	float: right;
	background-color: transparent;
	margin-top: 10px;
}

What I did in my example I use the bootstrap classes:

<button class="btn btn-outline-danger btn-sm" onclick="myFunction()" id="myBtn">Read more</button>

btn btn-outline-danger btn-sm

You can check them here:

In bootstrap you can add the float right classe too so just add in front of the classe a class
float-right.

As you can see here:

There is a problem here, cause is id only allow me to do it to one element and I need to do it to a few! What to do?

Maybe getElementsByClassName instead?

add a specific class to all element you want to change and then just make this inside style tags:

.specificclass {
	float: right;
	background-color: transparent;
	margin-top: 10px;
	}

But instead of doing this inside the code script of that specific button, go to code preferences of the page and add the style tags and the code inside it.

I mean I have a few places to add this code but cause is id it doesn’t allow me

In each code in the button add a class for example “ttt”

<button class="ttt" onclick="myFunction()" id="myBtn">Read more</button>

Then in page preferences press Add Code, and inside there add the folowing code:

<style>
.ttt {
	float: right;
	background-color: transparent;
	margin-top: 10px;
}
</style>

You will only see that when you preview the web page…

Not working! It works only with id but I need to add the code on a lot of places and the span id doesn’t allow me to use the dots in all the blocs

In my works in you example there is no class associated to button…
Before onclick=… you add to add class=“ttt”

I did but it doesn’t work!!

show me the code from the html snippet, and show me the code in page preferences with your changes… please.

<style>
#more {display: none;}
#myBtn {    
	float: right;
	background-color: transparent;
	margin-top: 10px;
	border: none;
	color: #003366;
    }
</style>
<button class"ttt"="" onclick="myFunction()" id="myBtn" ht"="">Czytaj więcej</button>

<script>
function myFunction() {
  var dots = document.getElementByClassName("dots");
  var moreText = document.getElementByClassName("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Czytaj więcej"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Pokaż mniej"; 
    moreText.style.display = "inline";
  }
}
</script>

<div class="col border-class">
    <img src="img/Cuave%20del%20Saturno.jpg" class="img-fluid mx-auto d-block" alt="Cuave%20del%20Saturno">
    <h3 class="mg-md header-style-destinations">
													Cueva de Saturno
												</h3>
    <p class="text-style-destinations mg-clear">
        Słodka woda Cueva de Saturno, 1 km na południe od Vía Blanca przy drodze do międzynarodowego lotniska Varadero<span id="dots">...</span><span id="more">&nbsp;jest bardzo popularną podziemną jaskinią z basenem do nurkowania i / lub pływania. Woda ma około 20 ° C, a maksymalna głębokość wynosi 22 m. Na miejscu znajduje się bar przekąskowy i wypożyczalnia sprzętu.&nbsp;</span>
    </p>
    <div class=" ">
        <style>
            #more {
                display: none;
            }
            
            #myBtn {
                float: right;
                background-color: transparent;
                margin-top: 10px;
                border: none;
                color: #003366;
            }
        </style>
        <button class "ttt"="" onclick="myFunction()" id="myBtn" ht "=" ">Czytaj więcej</button>

<script>
function myFunction() {
  var dots = document.getElementByClassName("dots ");
  var moreText = document.getElementByClassName("more ");
  var btnText = document.getElementById("myBtn ");

  if (dots.style.display === "none ") {
    dots.style.display = "inline ";
    btnText.innerHTML = "Czytaj więcej "; 
    moreText.style.display = "none ";
  } else {
    dots.style.display = "none ";
    btnText.innerHTML = "Pokaż mniej "; 
    moreText.style.display = "inline ";
  }
}
</script>

												</div>
												<p class="object-hidden mg-clear text-style-destinations " id="saturno-more-text ">
														Woda ma około 20 ° C, a maksymalna głębokość wynosi 22 m. &nbsp;Na miejscu &nbsp;znajduje się bar przekąskowy i wypożyczalnia sprzętu.
													</p>
											</div>

there you have the error:
class"ttt"=“”

Is class=“ttt”

And in the end you have (ht"=“”) is wrong too just delete it.

Let me try cause I tried with new ids but only one works (the last added)

the problem is this code of yours it works only for one id on the page. I have tried to change the id but it doesn’t work. How can you add this to a different columns on the same page?

Ok, lets go by partes,

  1. One part of code you insert in HTML BRIC

And that code is:

<style>
#more {display: none;}
</style>
<button class="ttt" onclick="myFunction()" id="myBtn">Czytaj więcej</button>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Czytaj więcej"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Pokaż mniej"; 
    moreText.style.display = "inline";
  }
}
</script>

Now the part of styling the button, (buttons if you use in more than one place in the same page is in the following place:

You have to go to page preferences:

image

That symbol on the left side of harrows:

Choose “Add Code”

And then insert your styling css:

The code:

<style>
.ttt {
	float: right;
	background-color: transparent;
	margin-top: 10px;
	border: none;
	color: #003366;
}
</style>

After that you see that nothing happens in preview:

But when you preview in browser:

Hope it helps you…

Thanks a lot! My problem are the ids cause Im using text! I can add the code normal but I cant make it work cause the ids and if I change the ids on the other blocs and also on the javascript only one read more works

ok, for that in each span you need to give different ID’s

So for text 1 is “dots”
For second column could be “dots2”
For third column could be “dots3”

And then in each code you change this line:

var dots = document.getElementById(“dots”);

And change the (“dots”) to (“dots2”), (“dots3”), etc…

ezgif.com-video-to-gif

Im changing the id of dots and more for exmple dots1 and more1 on the script functions is also var dots1 var more1Text and so on?

Because if I will make any change there it wont work either

Have you tried this?
This is what Im getting on my end… Now Im coming to what I ask myself most of the time. How come blocs doesn’t have something so simple as this.

SOrry my bad… saying you increasing numbers to each more column the next column have to have this code:

<style>
#more1 {display: none;}
</style>
<button class="ttt" onclick="myFunction1()" id="myBtn1">Czytaj więcej</button>

<script>
function myFunction1() {
  var dots = document.getElementById("dots1");
  var moreText = document.getElementById("more1");
  var btnText = document.getElementById("myBtn1");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Czytaj więcej"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Pokaż mniej"; 
    moreText.style.display = "inline";
  }
}
</script>

Changes

more → more1
myFunction → myFunction1
myBtn → myBtn1
dots → dots1