How to fix simple Javascript drop-down error?

Question

I'm having trouble with this drop down, i'm editing code for a client and I trimmed the Dropdown groups from 7 to 3 this is my code

What I am trying to do is activate the 3rd dropdown and add the css so that the rounded edges disappear when dropped down

I know it has to do with the script here:

function toggleGroup(group){
                    var isShown = document.getElementById("group"+group).style.display;


                    if (!isShown || isShown=="none"){

                        for (i = 1; i < 4; i++) {

                            if (i != group){
                                document.getElementById("group"+i).style.display="none";
                                document.getElementById("toggle"+i).src ="img/moreIcon.png";    
                                location.hash = "#myAnchor";                
                                    if(i=="3"){
                                    document.getElementById("backgroundSpeech").style.borderRadius="0 0 20px 20px";
                                    }
                            }
                            else{
                                document.getElementById("group"+i).style.display="block";
                                document.getElementById("toggle"+group).src ="img/lessIcon.png";    
                                location.hash = "#myAnchor";    
                                if(group=="3"){
                                    document.getElementById("backgroundSpeech").style.borderRadius="0px";
                                    }                   

                            }   
                        }
                    }   

                    else{
                                document.getElementById("group"+group).style.display="none";
                                document.getElementById("toggle"+group).src ="img/moreIcon.png";                        
                                    if(group=="3"){
                                    document.getElementById("backgroundSpeech").style.borderRadius="0 0 20px 20px";
                                    }   
                            }

                }       

        function toggleMy(my){
                    var isShown = document.getElementById(my).style.display;
                    if (!isShown || isShown=="none"){
                        document.getElementById(my).style.display="block";
                        var toWrite = "<a href=\"\javascript:toggleMy('" +my+ "');\"\>read less</a>";
                        document.getElementById("more"+my).innerHTML=toWrite;

}
                    else{
                        document.getElementById(my).style.display="none";
                        var toWrite = "<a href=\"\javascript:toggleMy('" +my+     "');\"\>read more</a>";
                        document.getElementById("more"+my).innerHTML=toWrite;

                    }

                                                }

Thanks in advance!

Answer 1

I wasn't sure whether you wanted no rounded corners at all but i removed all the border radius

function toggleGroup(group) {
  var isShown = document.getElementById("group" + group).style.display;


  if (!isShown || isShown == "none") {

    for (i = 1; i <= 3; i++) {

      if (i != group) {
        document.getElementById("group" + i).style.display = "none";
        document.getElementById("toggle" + i).src = "img/moreIcon.png";
        location.hash = "#myAnchor";
        if (i == "3") {
          document.getElementById("backgroundSpeech").style.borderRadius = "0 0 0px 0px";
        }
      } else {
        document.getElementById("group" + i).style.display = "block";
        document.getElementById("toggle" + group).src = "img/lessIcon.png";
        location.hash = "#myAnchor";
        if (group == "3") {
          document.getElementById("backgroundSpeech").style.borderRadius = "0px";
        }

      }
    }
  } else {
    document.getElementById("group" + group).style.display = "none";
    document.getElementById("toggle" + group).src = "img/moreIcon.png";
    if (group == "3") {
      document.getElementById("backgroundSpeech").style.borderRadius = "0 0 0px 0px";
    }
  }

}






function toggleMy(my) {
  var isShown = document.getElementById(my).style.display;
  if (!isShown || isShown == "none") {
    document.getElementById(my).style.display = "block";
    var toWrite = "<a href=\"\javascript:toggleMy('" + my + "');\"\>read less</a>";
    document.getElementById("more" + my).innerHTML = toWrite;

  } else {
    document.getElementById(my).style.display = "none";
    var toWrite = "<a href=\"\javascript:toggleMy('" + my + "');\"\>read more</a>";
    document.getElementById("more" + my).innerHTML = toWrite;

  }

}

.myGroup {
  font-family: Arial;
  color: #red;
  background: #3399ff;
  font-size: 18px;
  line-height: 30px;
  padding: 5px 0 0 10px;
  text-align: left;
  margin-bottom: 0px;
}
.myGroup img {
  float: right;
  padding: 5px 10px 0 0;
  border: none;
}
.myGroup {
  border: 0 none;
}
.group {
  border-bottom: 1px solid #ffffff;
}
.group a,
.group a:hover,
.group a:active,
.group a:visited {
  box-sizing: unset;
  outline: none;
  text-decoration: none;
}
.first {
  border-radius: 0 0px 0 0;
}
.last {
  border-radius: 0 0 0px 0px;
}
.noDisplay {
  display: none;
}
.my {
  background-color: #eee;
  width: 100%;
  padding: 15px 15px 30px;
  border-bottom: 1px solid #ffffff;
}
.myIm {
  float: left;
  width: 20%
}
.myBi {
  float: left;
  width: 80%;
  color: #363636;
  font-size: 12px;
}
.myName {
  float: right;
  width: 80%;
  color: #363636;
  font-size: 12px;
  text-align: left;
}
.myName h1 {
  font-size: 18px;
  color: #363636;
  text-decoration: underline;
  line-height: 18px;
  font-family: 'arial';
}
.myBi span,
.myBi span a {
  float: right;
  color: #b00f3a;
  text-decoration: underline;
}

<!-- begin dr 1-->
<a name="group1"></a>
<div class="group">
  <a href="javascript:toggleGroup('1');">
    <div class="first myGroup">TEST
      <img src="img/moreIcon.png" id="toggle1">
    </div>
  </a>
  <div class="noDisplay" id="group1">





    <!-- -->
    <div class="my">
      <div class="myName">
        <h1>TEST</h1>
      </div>
      <div class="myIm">
        <img src="img/>
                        </div>
                        <div class=" myBi ">
                        <p>TEST </p>
                        
                        <br style="clear:both; " />
                        </div>
                        <br style="clear:both; " />
                        </div>
                        <!--end -->
                        
                        
                        
               
                        
                        
                   
                        
                        
                        
                        
                        
                        
                        
                        </div>
                        
                        
                        </div>
                        <!-- end dr1-->
                        
                        
                        
                          <!-- begin dr2-->
                       <a name="group2 "></a>   <div class="group " >
                        <a href="javascript:toggleGroup( '2'); " border="0 "><div class="myGroup ">TEST<img
                        src="img/moreIcon.png " id="toggle2 "></div></a>
                        <div class="noDisplay " id="group2 ">
                       
                        <!-- -->
                        <div class="my ">
                        <div class="myName "><h1>TEST</h1></div>
						<div class="MyIm ">
                        
                        </div>
                        <div class=" ">
                        <p>TEST</p>
                       
                        <br style="clear:both; " />
                        </div>
                        <br style="clear:both; " />
                        </div>
                        <!--end -->
                       
                        
                 
                        
                        </div>
                        
                        
                        
                        </div>
                        <!-- end dr2-->
                        

                        
                        
                        
                        
                        
                        
                                  <!-- begin dr7-->
                         <a name="group6 "></a> <div class="group " style="padding-bottom:40px; ">
                        <a href="javascript:toggleGroup( '3'); " border="0 "><div class="last myGroup " id="backgroundSpeech ">TEST
<img
                        src="img/moreIcon.png " id="toggle3 "></div></a>
                        <div class="noDisplay " id="group3 ">
                       
                            <!-- -->
                        <div class="my ">
                        <div class="myName "><h1>TEST</h1></div>
                        <div class="myIm ">
                        <img src="img/jpg ">
                        </div>
                        <div class="myBi ">
                        <p>TEST</p>
                       
                        <br style="clear:both; " />
                        </div>
                        <br style="clear:both; " />
                        </div>
                        <!--end -->
                        
                        
                       
                        
                        
                        
                        </div>
                        
                        </div>
                        <!-- end -->
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
						
                        
                        
                        </div>