My code below is part of a small website using w3.css The accordion opens OK, and the text within the "hide" sections wraps properly. But the text beginning "JOB TITLE" and the other beginning "Job Description:" both fail to wrap, that's to say they disappear off the right-hand edge of the viewport. The desired behavior is that all text should wrap when viewed on a narrow viewport.
<button onclick="myFunction('uid22222')" class="w3-button w3-left-align job_title">JOB TITLE HERE - WHICH MIGHT BE VERY AND VERY AND VERY AND VERY LONGGGGGG SO NEEDS TO WRAP WHEN VIEWED IN A NARROW VIEWPORT LIKE A PHONE SCREEN
<div class="job_briefly">Job Description: Some text here which briefly describes the vacancy and which needs to wrap when viewed in a narrow viewport, which happens ok when viewing the "hide" text below..<br>And some more text.</button>
<div id="uid22222" class="w3-hide job_hidden">
Location details.
<br><b>Organisation Name</b>
<br>Pay & Hours &/or Benefits.
<br>Apply on or before xxx date.</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
