Jump to content

Simple show hide html span solution


oz11
Go to solution Solved by Barand,

Recommended Posts

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 by oz11
grammer
Link to comment
Share on other sites

  • Solution

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>

 

  • Thanks 1
Link to comment
Share on other sites

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 by oz11
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by oz11
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Edited like this:

Quote

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

And now displays like this,,..

Screenshot from 2022-11-12 20-37-09.png

 

Does this look OK to you:

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

Edited by oz11
try v4.0
Link to comment
Share on other sites

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 by oz11
addition
Link to comment
Share on other sites

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.  
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.