Develop Reference

display id of shape in an input type when dropping to drag area and edit shapes in drag area on selecting them

i am experimenting with JavaScript to complete some drag and drop tasks like displaying ids whenever a shape is dropped into a drag area. I cant figure out how to display the ids of the shapes in the table input type of number each time a shape is dropped in the drag space.
here is the JavaScript code
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
if (id == "drag1" && ev.target.id == "drag-area") {
var nodeCopy = document.getElementById(id).cloneNode(true);
nodeCopy.id = incrementId();
function incrementId() {
if (!this.latestId) this.latestId = 1;
else this.latestId++;
return this.latestId;
}
ev.target.appendChild(nodeCopy);
var id = document.getElementById(latestId).id;
//display id on shape
document.getElementById(latestId).innerHTML = id;
var value = document.getElementById(latestId).id;
document.getElementById(latestId).value = value;
console.log(value);
}
if (id == "drag3" && ev.target.id == "drag-area") {
var nodeCopy = document.getElementById(id).cloneNode(true);
nodeCopy.id = incrementId();
function incrementId() {
if (!this.latestId) this.latestId = 1;
else this.latestId++;
return this.latestId;
}
ev.target.appendChild(nodeCopy);
var id = document.getElementById(latestId).id;
//display id on shape
document.getElementById(latestId).innerHTML = id;
var value = document.getElementById(latestId).id;
document.getElementById(latestId).value = value;
console.log(value);
}
}
function remove(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var del = confirm(
"You are about to DELETE this insert. Do you wish to continue?"
);
if (del) {
var el = document.getElementById(data);
el.parentNode.removeChild(el);
console.log("item deleted");
}
}
function decreasewidth() {
var id = document.getElementById(latestId).id;
var myImg = document.getElementById(id);
var currWidth = myImg.clientWidth;
if (currWidth == 50) {
myImg.style.width = currWidth - 0 + "px";
} else {
myImg.style.width = currWidth - 15 + "px";
}
}
function increaseheight() {
var id = document.getElementById(latestId).id;
var myImg = document.getElementById(id);
var currHeight = myImg.clientHeight;
if (currHeight == 500) {
myImg.style.height = currHeight + 0 + "px";
} else {
myImg.style.height = currHeight + 15 + "px";
}
}
function decreaseheight() {
var id = document.getElementById(latestId).id;
var myImg = document.getElementById(id);
var currHeight = myImg.clientHeight;
if (currHeight == 50) {
myImg.style.height = currHeight - 0 + "px";
} else {
myImg.style.height = currHeight - 15 + "px";
}
}
here is the code for the html where the table input is
<div class="table-edit">
Table:<input
class="table-id"
ondrop="drop(event)"
type="number"
value=""
/>
</div>
there is the full html code
div class="mains">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content container">
<div class="row">
<div class="col-md-12">
<div class="box box-solid">
<div class="box-header bg-teal">
<h3 class="box-title">Tables</h3>
</div>
<form action="" method="POST">
<div class="box-body">
<div class="row">
<div class="col-md-12">
<table id="example1" class="table table-striped">
<div class="table-area">
<div class="row container table-section">
<div
class="roster-box draggable-shapes col-lg-4 col-md-4 col-sm-12"
ondrop="remove(event)"
ondragover="allowDrop(event)"
>
<h1
class="text-center"
style="text-decoration: underline"
>
tables
</h1>
<div class="table-area-section">
<li>
<div
class="circle"
id="drag1"
draggable="true"
ondragstart="drag(event)"
alt="circle"
></div>
</li>
<li>
<div
class="rectangle"
id="drag3"
draggable="true"
ondragstart="drag(event)"
></div>
</li>
</div>
</div>
<div
class="drag-and-drop col-lg-8 col-md-8 col-sm-12"
>
<div
id="drag-area"
class="roster-box text-center drag-section"
ondrop="drop(event)"
ondragover="allowDrop(event)"
onselect="selectImage()"
></div>
<div class="edit-section">
<li>
<div class="table-edit">
Table:<input
class="table-id"
ondrop="drop(event)"
type="number"
value=""
/>
</div>
</li>
<li>
Width:
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="increasewidth()"
>
+
</button>
</div>
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="decreasewidth()"
>
-
</button>
</div>
</li>
<li>
Height:
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="increaseheight()"
>
+
</button>
</div>
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="decreaseheight()"
>
-
</button>
</div>
</li>
</div>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
<!-- /. box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
</div>
</div>
styling in addition to bootstrap formats
.table-area-section li {
display: inline-block;
padding: 8px;
}
.drag-section {
height: 386.5px;
}
.edit-section {
padding-top: 20px;
}
.edit-section li {
list-style: none;
display: inline-block;
padding-left: 15px;
}
.input-group {
width: 35px;
}
.table-id {
width: 40px;
}
.draggable-shapes {
border: 1px solid #c3ccff44;
height: 677px;
}
.drag-and-drop {
border: 1px solid #c3ccff44;
}
.table-services > tbody > tr > td,
.table-services > tbody > tr > th,
.table-services > tfoot > tr > td,
.table-services > tfoot > tr > th,
.table-services > thead > tr > td,
.table-services > thead > tr > th {
padding: 20px;
}
.form-table {
float: right;
padding: 20px;
}
.circle {
background: rgb(168, 168, 168);
border-radius: 50%;
border: rgb(168, 168, 168) 6px solid;
width: 80px;
height: 80px;
}
.rectangle {
height: 80px;
background: rgb(168, 168, 168);
text-align: center;
border-radius: 7%;
width: 80px;
border: rgb(168, 168, 168) 6px solid;
}
also if there is a way to change the shapes of different shapes on selecting them, I would be happy to receive some idea o how to accomplish that

I have simplified the code quite a bit, but hopefully this does what you are looking for.
I assume that by id's of the shapes, you mean the number at the end of the id attribute of the shape? You could parse this out using a regex, but I have went down the simpler solution of storing this number in a data attribute.
function dragover(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("id", ev.target.dataset.id);
}
function drop(ev) {
ev.preventDefault();
var id = parseInt(ev.dataTransfer.getData("id"), 10);
inputField.value = id;
}
.shapes {
display: flex;
}
.circle {
background: rgb(168, 168, 168);
border-radius: 50%;
border: rgb(168, 168, 168) 6px solid;
width: 80px;
height: 80px;
margin: 10px;
}
.rectangle {
margin: 10px;
height: 80px;
background: rgb(168, 168, 168);
text-align: center;
border-radius: 7%;
width: 80px;
border: rgb(168, 168, 168) 6px solid;
}
.drop-area {
padding: 50px;
border: dotted 2px dimgrey;
margin: 10px;
text-align: center;
font-style: italic;
color: grey;
}
.input {
margin: 10px;
}
<div class="shapes">
<div class="circle" id="drag1" data-id="1" draggable="true" ondragstart="drag(event)"></div>
<div class="rectangle" id="drag3" data-id="3" draggable="true" ondragstart="drag(event)"></div>
</div>
<div class="drop-area" ondragover="dragover(event)" ondrop="drop(event)">
drop zone
</div>
<input id="inputField" class="input" type="number" value="0" />

Photos at slider don`t load at first time

I`ve made slider. When I reload the page, first photo displays. When I click "next", it displays nothing. I should click "previous" and then "next" again. After that operation photo displays.
I`ve tried to make separate function, work with sepate Image object, but nothing works.
<div class="container main" style=" padding:40px;">
<div id="slide" class="container-fluid slide" style="max-height:481px;height:480px; padding: 0;display: flex;">
<div class="switch left" onclick="change('prev');" style="">
<div class="pont" style="border-radius: 10px ;width: 100px;height: 100px;margin:auto; margin-top: 190px; transform: rotate(45deg);border-left: 10px solid #fff;border-bottom: 10px solid #fff;" >
</div>
</div>
<div class="img-block" style="z-index: 1">
<div class="img">
<img id="imag" src="img/1.jpg" alt="">
<script>
var imag = document.getElementById('imag');
var wid = imag.width;
var het = imag.height;
var cof = wid/het;
document.getElementById('imag').height = "478";
document.getElementById('imag').width = 478*cof;
</script>
</div>
<div class="des">
<p id="description">
</p>
</div>
</div>
<div style="margin-right: 0;" onclick="change('next');" class="switch right">
<div class="pont" style="border-radius: 10px ;width: 100px;height: 100px;margin:auto; margin-top: 190px; transform: rotate(225deg);border-left: 10px solid #fff;border-bottom: 10px solid #fff;" >
</div>
</div>
</div>
</div>
<script>
var pointer = 1;
function change(where_to_move)
{
var img = new Image();
if (where_to_move == "next") {
if(pointer == 7)
{
pointer = 1;
}
else
{
pointer++;
}
}
else
{
if(pointer==1)
{
pointer = 7;
}
else
{
pointer--;
}
}
img.src = "img/"+pointer+".jpg";
var cofc = img.width / img.height;
img.height = "478";
img.width = 479*cofc;
document.getElementById('imag').src= img.src;
document.getElementById('imag').height = img.height;
document.getElementById('imag').width = img.width;
}
</script>
I want this to work it in a proper way

Because you ask the right way, here is how I imagine it;)
CSS
.Slide_2 {
max-height:481px;
height: 480px;
padding: 0;
display: flex;
}
.Pont_2 {
border-radius: 10px ;
width: 100px;
height: 100px;
margin: auto;
margin-top: 190px;
border-left: 10px solid #fff;
border-bottom: 10px solid #fff;
}
HTML body
<div class="container main" style=" padding:40px;">
<div id="slide" class="container-fluid slide Slide_2">
<div class="switch left" onclick="change(-1);" >
<div class="pont Pont_2" style="transform: rotate(45deg);"></div>
</div>
<div class="img-block" style="z-index: 1">
<div class="img">
<img id="imag" src="ZIM/concept_A.jpg" alt="">
</div>
<div class="des">
<p id="description"> </p>
</div>
</div>
<div style="margin-right: 0;" onclick="change(+1);" class="switch right">
<div class="pont Pont_2" style="transform: rotate(225deg);">
</div>
</div>
</div>
</div>
JS part
const
imag = document.getElementById('imag'),
ImgTab = Array.from([1,2,3,4,5,6,7]).map(r=>{
let
IMG = new Image(),
SRC = `img/${r}.jpg`;
IMG.src = SRC; // loading image in memory
return {'src':SRC, 'img': IMG}; // keep it in memory
}),
NbMax = ImgTab.length;
imag.style.height = "478px";
var pointer = 0;
function change(MovVal) {
pointer = (pointer + MovVal + NbMax) % NbMax;
imag.src = ImgTab[pointer].src;
}

Adding same text to multiple divs of different sizes

Currently, I can add text to a single div (currently, #adXL) using text and file inputs. How can I add that same text and files (from those same text and file inputs) to multiple divs (#adL, #adM, #adS)?
I would also like to be able to add many more divs that receive the same text and file inputs, as well.
Here is my current code:
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('adXL').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}
document.getElementById('getval2').addEventListener('change', readURL2, true);
function readURL2(){
var file2 = document.getElementById("getval2").files[0];
var reader2 = new FileReader();
reader2.onloadend = function(){
document.getElementById('logo').style.backgroundImage = "url(" + reader2.result + ")";
}
if(file2){
reader2.readAsDataURL(file2);
}else{
}
}
$(document).ready(function(){
var div1 = $('#header')[0];
$('#text1').bind('keyup change', function() {
div1.innerHTML = this.value;
});
var div2 = $('#subHeader')[0];
$('#text2').bind('keyup change', function() {
div2.innerHTML = this.value;
});
var div3 = $('#button')[0];
$('#text3').bind('keyup change', function() {
div3.innerHTML = this.value;
if(this.value.length > 0) {
$('#button').css('display', 'block')
} else {
$('#button').css('display', 'none')
}
});
});
h2 {
font-size: 14px;
}
#adXL{
background-image:url('');
background-size:cover;
background-position: center;
background-repeat: no-repeat;
min-height: 300px;
min-width: 0;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
margin: 20px 0px;
background-color: transparent;
padding: 30px;
z-index: 10000;
position: relative;
}
#logo{
background-image:url('');
background-size: auto 100%;
background-position: center left;
background-repeat: no-repeat;
min-width: 0;
width: 100px;
min-height: 50px;
display: flex;
margin: 30px 0 0 0;
}
#adCopy {
display: flex;
flex: 1;
flex-wrap: wrap;
flex-direction: column;
}
#adButtonAndLogo {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
}
#header {
font-size: 52px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 600;
margin: 0px;
line-height: 110%;
}
#subHeader {
font-size: 24px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 10px 0;
display: block;
margin-right: auto;
}
#button {
font-size: 18px;
color: white;
font-family: "helevtica", sans-serif;
font-weight: 300;
padding: 16px 24px;
border: 0px solid #fff;
border-radius: 3px;
text-align: center;
display: none;
background-color: #1D41FF;
letter-spacing: 1px;
margin: 60px 0 0 0;
box-shadow: 0 2px 7px rgba(0,0,0,0.4);
}
#adL {
?
}
#adM {
?
}
#adS {
?
}
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Background Image</h2>
<input type='file' id='getval' name="background-image" />
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button Text</h2>
<input id="text3" class="textInput">
<h2>Logo Image Asset</h2>
<input type='file' id='getval2' name="background-image" />
<div id='adXL' class="bg-img">
<div id="adCopy">
<div id="header" class="changeMe"></div>
<div id="subHeader" class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div id="button"></div>
</div>
</div>
<div id='adL' class="bg-img">
<div id="adCopy">
<div id="header" class="changeMe"></div>
<div id="subHeader" class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div id="button"></div>
</div>
</div>
<div id='adM' class="bg-img">
<div id="adCopy">
<div id="header" class="changeMe"></div>
<div id="subHeader" class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div id="button"></div>
</div>
</div>
<div id='adS' class="bg-img">
<div id="adCopy">
<div id="header" class="changeMe"></div>
<div id="subHeader" class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div id="button"></div>
</div>
</div>

Make an array of the elements you want to add the styles to, the elements you want to add the text to, the elements you want to listen for text changes, and the elements you want to listen for file changes. Then, just iterate over them:
const textInputs = document.querySelectorAll('input:not([type="file"])');
const elementsToChangeOnTextInput = [...document.querySelectorAll('.changeMe')];
const fileInputs = document.querySelectorAll('input[type="file"]');
const elementsToChangeOnFileInput = ['#adXL', '#adL', '#adM', '#adS']
.map(selector => document.querySelector);
textInputs.forEach((textInput) => {
textInput.addEventListener('keyup', () => {
const newValue = textInput.value;
elementsToChangeOnTextInput
.forEach(element => element.textContent = newValue);
});
});
fileInputs.forEach((fileInput) => {
const file = fileInput.files[0];
if (!file) return;
const reader = new FileReader();
reader.addEventListener('loadend', function(){
const imgCSSStr = `url(${reader.result})`;
elementsToChangeOnFileInput.forEach(element => {
element.style.backgroundImage = imgCSSStr;
});
});
reader.readAsDataURL(file);
});
h2 {
font-size: 14px;
}
#adXL{
background-image:url('');
background-size:cover;
background-position: center;
background-repeat: no-repeat;
min-height: 300px;
min-width: 0;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
margin: 20px 0px;
background-color: transparent;
padding: 30px;
z-index: 10000;
position: relative;
}
#logo{
background-image:url('');
background-size: auto 100%;
background-position: center left;
background-repeat: no-repeat;
min-width: 0;
width: 100px;
min-height: 50px;
display: flex;
margin: 30px 0 0 0;
}
#adCopy {
display: flex;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Background Image</h2>
<input type='file' id='getval' name="background-image" />
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button Text</h2>
<input id="text3" class="textInput">
<h2>Logo Image Asset</h2>
<input type='file' id='getval2' name="background-image" />
<div id='adXL' class="bg-img">
<div id="adCopy">
<div class="changeMe"></div>
<div class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div class="changeMe"></div>
</div>
</div>
<div id='adL' class="bg-img">
<div id="adCopy">
<div class="changeMe"></div>
<div class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div class="changeMe"></div>
</div>
</div>
<div id='adM' class="bg-img">
<div id="adCopy">
<div class="changeMe"></div>
<div class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div class="changeMe"></div>
</div>
</div>
<div id='adS' class="bg-img">
<div id="adCopy">
<div class="changeMe"></div>
<div class="changeMe"></div>
</div>
<div id="adButtonAndLogo">
<div id="logo"></div>
<div class="changeMe"></div>
</div>
</div>

i have many div and i want to search/filter by textinput in js scripts by onkeyup and I Have more than 100 div

I have more than 100 div elements, and I want to search/filter by textinput in js scripts by onkeyup.
function crmenu() {
var j, descc, filter, input, boxmenu, descc;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
boxmenu = document.getElementsByClassName("boxmenu");
for (j = 0; j < boxmenu.length; j++) {
if (boxmenu.innerHTML.toUpperCase().indexOf(filter) > -1) {
boxmenu[j].style.display = "";
} else {
boxmenu[j].style.display = "none";
}
}
}
div.boxmenu {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 120px;
height: 170px;
}
div.boxmenu:hover {
border: 1px solid #777;
}
div.boxmenu img {
width: 100%;
height: auto;
}
div.titlemenu {
padding: 1px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="row" style="padding-left:1px;">
<div class="boxmenu">
<a>
<img src="" alt="">
</a>
<div class="titlemenu">material </div>
</div>
<div class="boxmenu">
<a>
<img src="" alt="">
</a>
<div class="titlemenu">Human Resource </div>
</div>
<div class="boxmenu">
<a>
<img src="" alt="">
</a>
<div class="titlemenu">Financial </div>
</div>
</div>
<input type="text" id="myInput" onkeyup="crmenu ( ) " placeholder="search in input">

How to fix simple Javascript drop-down error?

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!

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>