回答編集履歴
1
追記
    
        answer	
    CHANGED
    
    | 
         @@ -53,4 +53,29 @@ 
     | 
|
| 
       53 
53 
     | 
    
         
             
                }
         
     | 
| 
       54 
54 
     | 
    
         
             
            </script>
         
     | 
| 
       55 
55 
     | 
    
         
             
            </body>
         
     | 
| 
       56 
     | 
    
         
            -
            ```
         
     | 
| 
      
 56 
     | 
    
         
            +
            ```
         
     | 
| 
      
 57 
     | 
    
         
            +
             
     | 
| 
      
 58 
     | 
    
         
            +
            追記
         
     | 
| 
      
 59 
     | 
    
         
            +
             
     | 
| 
      
 60 
     | 
    
         
            +
            ほかに邪魔する要素がないと仮定すればこうできます
         
     | 
| 
      
 61 
     | 
    
         
            +
            ```html
         
     | 
| 
      
 62 
     | 
    
         
            +
            const root = document;//.getElementById("親のID");
         
     | 
| 
      
 63 
     | 
    
         
            +
            const buttons = root.getElementsByTagName("button");
         
     | 
| 
      
 64 
     | 
    
         
            +
            const pList= root.getElementsByTagName("p");
         
     | 
| 
      
 65 
     | 
    
         
            +
            console.assert(pList.length === buttons.length);
         
     | 
| 
      
 66 
     | 
    
         
            +
            for(let i=0; i<buttons.length; i++){
         
     | 
| 
      
 67 
     | 
    
         
            +
                buttons[i].addEventListener("click",()=>{
         
     | 
| 
      
 68 
     | 
    
         
            +
                    for(let j=0; j<buttons.length; j++){
         
     | 
| 
      
 69 
     | 
    
         
            +
                        if(j === i){
         
     | 
| 
      
 70 
     | 
    
         
            +
                            pList[j].style.display = "block";
         
     | 
| 
      
 71 
     | 
    
         
            +
                            buttons[j].style.backgroundColor = "yellow";
         
     | 
| 
      
 72 
     | 
    
         
            +
                        }else{
         
     | 
| 
      
 73 
     | 
    
         
            +
                            pList[j].style.display = "none"
         
     | 
| 
      
 74 
     | 
    
         
            +
                            buttons[j].style.backgroundColor = "grey";
         
     | 
| 
      
 75 
     | 
    
         
            +
                        }
         
     | 
| 
      
 76 
     | 
    
         
            +
                    }
         
     | 
| 
      
 77 
     | 
    
         
            +
                });
         
     | 
| 
      
 78 
     | 
    
         
            +
            }
         
     | 
| 
      
 79 
     | 
    
         
            +
            ```
         
     | 
| 
      
 80 
     | 
    
         
            +
            うまく動かなかったら親要素を詳細に指定するなり,得られた要素リストにフィルターかけるなりしてください
         
     | 
| 
      
 81 
     | 
    
         
            +
            idだけではこれが限界だと思います
         
     |