JS button with dropdown arrow

I currently have buttons on my website that are large and act as dropdowns for content. On click a div becomes enabled and shows my content, on click again the content goes away. I would like to add an arrow (something like this https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png) to the far right of it so it lets the user know that its a button with an on click function. As well if possible when the content is dropped down I want the arrow to "flip" so its now an up arrow. Heres what my code looks like right now. Does anyone know how to do this/implement this?

<div id="content">
        <div id=dropdowncenter>
        <button id="phonenumbers" onclick="toggle_visibility('phonenumberscontent');" >Phone Numbers</button>
        <div id="phonenumberscontent" style=display:none;>
           <p>THIS IS SOME CONTENT</p>
            </div>
        </div>
    </div>

javascript

   <script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

css

   #dropdowncenter{
    text-align: center;
}

#phonenumbers{
    color:white;
    background-color:#009491;
    border:none;
    width:702px;
    height:50px;
}

#phonenumberscontent{
    width:700px;
    color:black;
    border:1px solid black;
    margin:-1px auto;
    padding:0;
    background-color: none;
    margin-bottom: 5px;
}

You can try something like this (link to JSFiddle) (here I'm using HTML5 data- attribute to indicate if button/content opened/closed).

I've modified it a little, added data-toggle to the button and data-state to the content below the button to indicate their open and close state. Also I've changed onclick event which now on each click find content according to the button that was clicked and changes their data attributes.

For displaying arrow/triangle I've used pseudo element "after" and added to its content arrow sign as Unicode (which I picked up from here)

HTML:

<div id="content">
   <div id=dropdowncenter>
     <button id="phonenumbers" class="dropdown" data-toggle="off">Phone Numbers</button>
       <div id="phonenumberscontent" class="content" data-state="closed">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
  publishing software like Aldus PageMaker including versions of Lorem Ipsum.
       </div>
   </div>
</div>

CSS:

#dropdowncenter {
   text-align: center;
}

#phonenumbers {
    color: white;
    background-color: #009491;
    border: none;
    width: 702px;
    height: 50px;
}

#phonenumberscontent {
    width: 700px;
    color: black;
    border: 1px solid black;
    margin: -1px auto;
    padding: 0;
    background-color: none;
    margin-bottom: 5px;
}
/* class for all dropdown buttons*/       
.dropdown {
    position: relative;
}

.content {
    display: none;
}

.content[data-state="open"] {
    display: block;
}

.dropdown:after {
    content: "\25BC";/*here you can add any image url / sign you want for arrow down*/
    position: absolute;
    right: 15px;
}

.dropdown[data-toggle="on"]:after {
    content: "\25B2";/*here you can add any image url / sign you want for arrow up*/
}

JS:

function toggle_visibility(e) {
  var content = e.target.nextElementSibling; /// content element that appears after button
  if (content.getAttribute("data-state") === "closed") { /// if content closed
    content.setAttribute("data-state", "open"); // open it
    e.target.setAttribute("data-toggle", "on"); /// change toggle on button
  } else {
    content.setAttribute("data-state", "closed"); /// close content
    e.target.setAttribute("data-toggle", "off"); /// change toggle on button
  }
}

var btns = document.querySelectorAll(".dropdown"); /// collect all buttons

for (var i = 0, len = btns.length; i < len; i++) {
   //// add event handler for click to all button
  btns[i].addEventListener("click", toggle_visibility);
}

Please let me know if you have any further questions regarding the solution above.

HTH.