I'm new to HTML and CSS, but I am trying to create a "click to view more images" function on my website using just CSS.

I've figured out how to make the images appear and disappear when clicked on, but cannot figure out how to "swap" the text afterwords.

So, what I am trying to accomplish is, for the text to change from "Click to view more" to "Click to view less" after being clicked.

Is there a better way of doing this?

HTML/CSS:

summary {
  background-color: #FFFFFF;
  color: #000000;
  max-width: 195px;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
}

details {
  text-decoration: none;
  margin-top: 50px;
  margin-bottom: 50px;
}

summary:hover {
  text-decoration: underline;
  font-size: 16.3px;
  padding: 11px;
}

<details>
  <summary>Click to view more images</summary>
</details>

CodePudding user response：

Unsure of what you are asking or trying to do. the tag details does basicly what you are looking for.

If it is about the text of summary, you can complete it via a pseudo element and switch it, if the tag is open or not. It can be filtered via the attribute open.

example

summary {
  background-color: #FFFFFF;
  color: #000000;
  max-width: 195px;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
}

details {
  text-decoration: none;
  margin-top: 50px;
  margin-bottom: 50px;
}
summary::after {
content:' more';
}

details[open] summary::after {
content:' less';
}

<details>
  <summary>Click to view  </summary>
  whatever to be seen
</details>

A bit more about the <details> tag : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

CodePudding user response：

I see @G-Cyrillus came up with a way to do it in pure CSS/HTML, but I'll keep this solution up if other users run into the same problem but need/want to use JS as well:

HTML

In HTML, give the summary tag an onclick attribute, and an ID:

<details>
  <summary id="summary" onclick="clicked()">Click to view more images</summary>
</details>

We add an ID so that in the following JS, we will be able to easily "grab" the summary tag. We add an onclick attribute so every-time the summary tag is clicked, it will "jump" the the following JS:

JS

The following JS is very short and I will do my best to explain it:

let clickCount = 0

function clicked() {
    clickCount  
    if ( clickCount % 2 == 0 ) {
    document.getElementById("summary").innerHTML = "Click to view more images"
    } else {
   document.getElementById("summary").innerHTML = "Click to view less images"
   }

}

What's happening here?

First of all, We're declaring a value called clickCount.
We're declaring the onclick-function which we called in the HTML, at the summary tag. Everytime the summary will be clicked, the program would "jump" into the function.
Inside the function, the first thing we're doing is increasing the variable clickCount by 1, because we know that if the function is being called, there was a click on the summary tag.
Now we ask: Is clickCount divisible by 2? ( counter % 2 == 0 ) if it is, we change summary's text to view more -> (document.getElementById("summary").innerHTML = "Click to view more images" )
Else, meaning clickCount is not divisible by 2, we change summary's text to view less -> ( document.getElementById("summary").innerHTML = "Click to view less images" )

And that's it, summary's text is being changed to the right text everytime it is clicked.

let clickCount = 0

function clicked() {
    clickCount  
    if ( clickCount % 2 == 0 ) {
    document.getElementById("summary").innerHTML = "Click to view more images"
    } else {
   document.getElementById("summary").innerHTML = "Click to view less images"
   }

}

<!DOCTYPE HTML> 
<head></head>
<body>

    <details>
      <summary id="summary" onclick="clicked()">Click to view more images</summary>
    </details>

</body>