Clickable li item to open li list


#1


I need something like this
+ Result for Team 1
+ Result for Team 2
+ Result for Team 3

When I click the + for Team 1: I want to see
- Result for Team 1
   * Game 1: Home - Away 2 - 1
   * Game 2: Home - Away 2 - 3
+ Result for Team 2
+ Result for Team 3
 When clicking the '-', then just like before

I already made the <ol> and <li>, but then ????

Thanks 
Luc


#2

there is no click event in html or css, there is :hover for css, but what you want to do, requires Javascript, or Jquery which is a javascript with the intent to make DOM manipulation easier


#3

Can you help me further with that issue?


#4

you didn't specify the approach you wanted to take? I can help, i am not going to code it for you.


#7

good start, maybe you could use JavaScript to manipulate the display property of the list elements you want to hide? Just give the list elements you want to hide a css of display: none

you can get the current css property value, see this stackoverflow question, you can google how to manipulate a css property, then you should be able to make a simple if/else to determine if menu is visible and hide it, or is hidden and want to display it


#8

Is there anyone here who can help with code, 'cos don't know much about jscript.
How return from results to list items again?


#9

do you know how to use if/else in JS? Along with googling how to change css property values, you are there


#10

Changing CSS values is not problem, but how to return to list then?


#11

what do you mean? You can simply change display to none to hide the list, and display block to make it magically appear again


#14

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <style>
  #Show14 {
    display: none;
  </style>
  <script>
    function u14(){
        document.getElementById("Show14").style.display = "block";
       
    }
 
    function u16(){
       
 
</script>
 
    
 
</head>
<body>
<ul>
    <li><a href="#" onclick=u14();>U14</a>
    	<div id="Show14">
        	<ul>
        		<li> a- b </li>
            	<li> c- d </li>
        	</ul>
     	</div>
     </li>
    
    <li><a href="#" onclick=u16();>U16</a></li>
    <li><a href="#">U18</a></li>
    <li><a href="#">U20</a></li>
</ul> 
</body>
</html>

#15

lets break it down, we first store the element in a variable:

var element = document.getElementById('Show14'),

then we can get the style of the element:

style = window.getComputedStyle(element),

now we want to see if the list is currently block or none, so we need to get the value:

displayValue = style.getPropertyValue('display');

now we can use a simple if/else to see if displayValue equals block, if so, set element to none, else set displayValue to block


#16

jQuery would make this so much simpler, and cleaner too.

And there's a course here that teaches just this kind of stuff.

This to me looks like cutting corners.

Is there anyone here who can help with code, 'cos don't know much about jscript.

I don't mean to be rude, but this kind of was. Wrong attitude in my humble opinion.


#17

I get no displayed value, when I click U14, nothing happens


#18

you still need to code the if/else to change the display value


#19

Like this:

function u14(){
        var element = document.getElementById('Show14')
        style = window.getComputedStyle(element)
        displayValue = style.getPropertyValue('display');
        if displayValue = "block" then
        	document.getElementById("Show14").style.display = ""
        else
        	document.getElementById("Show14").style.display = "block"
        end if

#20

Where did you learn to write JavaScript? That looks like Bash scripting to me.

Good, i helped enough. Good luck!

MDN - if/else, remember, to check if something is equal, use two equal signs, a single equal sign means assign


#21

Sorry, but this is wrong on so many levels, I don't even know where to begin.

Here's your solution: https://www.codecademy.com/learn/jquery

Don't cut corners, take the course. You'll be grateful later on.


#22

I found it myself, but still a question. Can I replace the function into only one function, so I don't have to rewrite it 4 times?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <style>
    
  #show14,  #show16{
    display: none;
    }
  </style>
 <script type="text/javascript">
    function u14(){
        var element = document.getElementById('show14')
        
        if (element.style.display == 'none') {
            element.style.display = 'block';
        } 
        else {
         element.style.display = 'none';
        }
    }
 
    function u16(){
       var element = document.getElementById('show16')
        
        if (element.style.display == 'none') {
            element.style.display = 'block';
        } 
        else {
         element.style.display = 'none';
        }
    }
 
</script>  


 
</head>
<body>
<ul>
    <li><a href="#" onclick=u14();>U14</a>
     <div id="show14">
         <ul type="square">
              <li> a- b </li>
                  <li> c- d </li>
         </ul>
      </div>
     </li>
    
   <li><a href="#" onclick=u16();>U16</a>
     <div id="show16">
         <ul type="square">
              <li> a- b </li>
                  <li> c- d </li>
         </ul>
      </div>
     </li>
</ul> 


</body>
</html>

#23

you would need an event listener and then toggle the child, its possible, but certainly easier in jquery


#24

Won't have time enough for learning jquery. Team leaves within 15 days.