Simple show hide html span solution

oz11 · November 12, 2022

Hey. I'm writing some code which would look a lot cooler if it had a bit of JavaScript.

It needs to be a link and when pressed a div or span is shown. Hidden to begin with and shown onclick. Problem is I suck at JS. Nothing fancy just dead basic. Any help please?

Edit: I hve this working solution (bellow), but how do i change it so that it's not shown to begin with and then "show" when clicked...

function show() {
  var divide = document.getElementById("info");
  if (divide.style.display === "block") {
    divide.style.display = "block";
  } else {
    divide.style.display = "none";
  }
}

<div id="info">Testy</div>
<button onclick="show()">Show/Hide</button>

Thanks.

Edited November 12, 2022 by oz11
grammer

Barand · November 12, 2022

As basic as it gets...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sessions &amp; Terms</title>
<meta charset="utf-8">
<script type='text/javascript'>
    function showDiv()
    {
        let thediv = document.getElementById("mydiv")
        if (thediv.style.display == "block") {
            thediv.style.display = "none"
        }
        else {
            thediv.style.display = "block"
        }
        
    }
</script>
<style type='text/css'>
    #mydiv {
        display: none;
    }
</style>
</head>
<body>
    <button onclick='showDiv()'>Show Div</button>
    <br>
    <div id='mydiv'>
        <h1>Hello, world</h1>
    </div>
</body>
</html>

oz11 · November 12, 2022

you're a star! :thumb-up:

oz11 · November 12, 2022

Problem is I have used it over once on the page (three to be exact) and it only works on the first one (opens), the other two just open the first one.. Help again plz.

Edited November 12, 2022 by oz11

Barand · November 12, 2022

Each time I click the button it either shows or hides the div so I cannot reproduce your problem.

Is your code different from mine?

oz11 · November 12, 2022

My code is abit different ..

for example..

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sessions &amp; Terms</title>
<meta charset="utf-8">

<style type='text/css'>
    #mydiv {
        display: none;
    }
</style>
</head>
<body>
    <a href='#' onclick='showDiv()'>Show Div</a>
    <br>
    <div id='mydiv'>
        <h1>Hello, world</h1>
    </div>
    
    <a href='#' onclick='showDiv()'>Show Div</a><br>
    <div id='mydiv'>
        <h1>Hello, world</h1>
    </div>
    
    <a href='#' onclick='showDiv()'>Show Div</a><br>
    <div id='mydiv'>
        <h1>Hello, world</h1>
    </div>
</body>
</html>

Do you know how i can make it so that the second and third open as well?

This is more similar to how mine is laid out on my site. Obvs with differences in content etc.

Edited November 12, 2022 by oz11

mac_gyver · November 12, 2022

DOM ids must be unique. you basically have the same problem (and solution) as in this recent thread - https://forums.phpfreaks.com/topic/315508-php-and-javascript-with-mysql-copy-button/

oz11 · November 12, 2022

So i edited..

<script type='text/javascript'>
    function showDiv()
    {
        let thediv = document.getElementById("mydiv")
        if (thediv.style.display == "block") {
            thediv.style.display = "none"
        }
        else {
            thediv.style.display = "block"
        }
        
    }
</script>

to...

<script type='text/javascript'>
    function showDiv(id)
    {
        let thediv = document.getElementById(id)
        if (thediv.style.display == "block") {
            thediv.style.display = "none"
        }
        else {
            thediv.style.display = "block"
        }
        
    }
</script>

AND..

<br><a href='#' onclick='showDiv()'>Show linked</a>

to..

<a href='#' onclick='showDiv('".$row['link_id']."')'>Show linked</a>

What am I doing wrong now? :S

Barand · November 12, 2022

Where did $row suddenly spring from?

Your code showed nothing like that.

oz11 · November 12, 2022

Sorry. Row is just a value from my database query. I'm using it as a unique identifier for the function parameter. But it could be anything with an incrementing value i believe. The website I'm applying the example to uses it. But the basis should still stay the same as I'm working on the example and the website together for this issue in synergy.

Edited November 12, 2022 by oz11

oz11 · November 12, 2022

Started to use an $index increment instead now. But principles should remain the same. See:

Barand · November 12, 2022

4 minutes ago, oz11 said:

Row is just a value from my database query.

I guessed that but your code shows no indication if any code that is buiding your links and divs from a query result.

You've shown us that you put the row id in the onclick event call. Where do you put the same id in the div's id attribute?

oz11 · November 12, 2022

Not sure at all how to handle the css display :S

mac_gyver · November 12, 2022

DOM ids should start with a letter (though browsers will probably let you use ones that start/are just a number.) the parameter in the function call is a string and must be surrounded by quotes. the onclick='...' attribute must also be quoted. the two quote types must be different. the id attribute in the <div ...> must also be set to be the same value as the parameter in the function call.

i recommend that you slow down and reread the linked to example.

Barand · November 12, 2022

4 minutes ago, oz11 said:

Not sure at all how to handle the css display :S

What has that response to do with my last question? i.e.

10 minutes ago, Barand said:

You've shown us that you put the row id in the onclick event call. Where do you put the same id in the div's id attribute?

oz11 · November 12, 2022

2 minutes ago, Barand said:

Where do you put the same id in the div's id attribute?

                    echo "<br><a href='#' onclick='showDiv(\"".$index."\")' style='float: right; margin-top: -6px;'>Show linked</a>";
                    echo getLinkTree($pdo, $row['url'], $index);

points to ...

function getLinkTree($pdo, $url, $index) {
    $res = str_replace(array('https://www.', 'http://www.', 'https://','http://'), '', $url);
    $stmt = $pdo->prepare("SELECT url FROM links WHERE url LIKE ?");
    $stmt->execute(["%$res%"]); 
    echo "<br><div id='mydiv' style='float: right; background-color: white; border: 1px solid grey;'>";
    while ($row = $stmt->fetch()) {
        echo $row['url']."<br />";
    }
    echo "</div>";
}

Is that ok/ what you needed? Sorry I was confused.

oz11 · November 12, 2022

Edited like this:

Quote

echo "<br><div id='".$index."' style='float: right; background-color: white; border: 1px solid grey;'>";

And now displays like this,,..

Does this look OK to you:

1514229223_Screenshotfrom2022-11-1220-51-13.png.c293ae18fb175f5138c9ccbd2d987713.png

Edited November 12, 2022 by oz11
try v4.0

oz11 · November 12, 2022

Edited the code so that its ...

Quote

onclick=\"showDiv(".$index.")\"

and..

<script type='text/javascript'>
    function showDiv(id)
    {
        let thediv = document.getElementById(id)
        if (thediv.style.display == "block") {
            thediv.style.display = "none"
        }
        else {
            thediv.style.display = "block"
        }
        
    }
</script>

and realised now when i click on the onclick'd "Show linked" link twice that the boxes disappear. Weird. Seems i'm going in the right direction, just doint understand why they are open to begin with and disappear on a double click. Obviously, it needs to be hidden to begin with and apear on a single click.

Edit:

Also, I just edited the stylesheet so that the id's start with a letter rather than number...

function getLinkTree($pdo, $url, $index) {
    $res = str_replace(array('https://www.', 'http://www.', 'https://','http://'), '', $url);
    $stmt = $pdo->prepare("SELECT url FROM links WHERE url LIKE ?");
    $stmt->execute(["%$res%"]); 
    echo "<br><div id='s".$index."' style='float: right; background-color: white; border: 1px solid grey;'>";
    while ($row = $stmt->fetch()) {
        echo $row['url']."<br />";
    }
    echo "</div>";
}

    #mydiv {
        display: none;
    }
    #s0 {
        display: none;
    }
    #s1 {
        display: none;
    }
    #s2 {
        display: none;
    }

Edited November 12, 2022 by oz11
addition

Barand · November 12, 2022

Give all the divs a class of "mydiv". Then in the <style> section change

    #mydiv {
        display: none;
    }

to

    .mydiv {
        display: none;
    }

then they all start off hidden.

oz11 · November 12, 2022

My hero <3 :wub: :thumb-up:

Edited November 12, 2022 by oz11

gizmola · November 14, 2022

Hopefully you learned a couple of important principles throughout this exercise:

html id's should always be unique in a page. For this reason they are rarely used for styling, again unless the styles being bound to them are also unique to that element
in general classes are much better for styling groups of things, and as Barand showed, for attaching a related event listener.

Sign In

Simple show hide html span solution

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information