How to make a div select work?

[Officer Erik 1K-88]

Well, you see here, I found this code for a div select (http://jsfiddle.net/VRjfm/):
HTML:

<div class="categories">
    <div class="category">1</div>
    <div class="category">2</div>
    <div class="category">3</div>
</div>

CSS:

.categories{width:150px; height:20px; border:solid 1px green; background:#e1e1e1;}
.category{display:none;}

JavaScript: (This is using jQuery)

$('.categories').prepend('<span>select options</span>');

$('.categories').click(function(){
  $('div',this).slideToggle();
  $('.categories span').html('select options');
});

$('.category').click(function(e){
  e.stopPropagation();
  $('.category').slideToggle();
  $('.categories span').html($(this).text());
});

But I have a problem with it, it doesn't work with images, also I would like it to be in plain JavaScript, as I don't know anything about how to work jQuery. In fact, I did this:
HTML:

<div class="categories">
    <div class="category"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnSG2sk6peNhSUfnsu7W7bHAsNlThy3zd1unYiGpKp_93C2kHQGjSbmYZmL84BTpDWanc:https://image.shutterstock.com/image-vector/ui-image-placeholder-wireframes-apps-260nw-1037719204.jpg&usqp=CAU" alt="placeholder 1"></div>
    <div class="category"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFKwpAYLdgVvhphi1bbppMkQhSmYHBJ2OtpRAVqVuocx5qoXzuHcNjGWHjXBRGJR9uoHM:https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png%3Fw%3D640&usqp=CAU" alt="placeholder 2"></div>
    <div class="category"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQvNJYG5M1LCfNbTvM6frlwIzRrVM9Vayyk3g-0gXze8EEwGtaFvldLi-QFBSY4kABxlY:https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807%3Fk%3D20%26m%3D1147544807%26s%3D612x612%26w%3D0%26h%3DpBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc%3D&usqp=CAU" alt="placeholder 3"></div>
</div>

CSS:

.categories{width:150px; height:20px; border:solid 1px green; background:#e1e1e1;}
.category{display:none;}

JavaScript: (This is using jQuery)

$('.categories').prepend('<span>select options</span>');

$('.categories').click(function(){
  $('div',this).slideToggle();
  $('.categories span').html('select options');
});

$('.category').click(function(e){
  e.stopPropagation();
  $('.category').slideToggle();
  $('.categories span').html($(this).text());
});

With the code, will the images did show up when you click the div, but when you click one of the images, it doesn't show the image in the selected area, and I would like it to do so. I should mention that I would like to be able to use this in a text editor, so I would need to know which of the options is actually selected. Obviously, the images are just placeholder images, so I am obviously not going to be using the images that I have stated in the JS code above.

 

[CodeMonkeyJ]

This Fiddle will get you in the right direction, but it's still jQuery. Basically, we've just gotta insert an image into the span instead of just changing the text. While it's valiant to want to use vanilla JavaScript, if you're trying to build a pretty interactive site, you're probably going to want to use it in the end anyway, so I'd bite the bullet and pick it up now. You can remove the last line in categories' click function if you don't want it swapping out the current image with the old text when you click it.

$('.categories').prepend('<span>select options</span>');

$('.categories').click(function(){
  $('div',this).slideToggle();
  $('.categories span').html('<span>select options</span>');
});

$('.category').click(function(e){
  e.stopPropagation();
  $('.category').slideToggle();
  $('.categories span').html($(this).html());
});

 

[Officer Erik 1K-88]

This Fiddle will get you in the right direction, but it's still jQuery. Basically, we've just gotta insert an image into the span instead of just changing the text. While it's valiant to want to use vanilla JavaScript, if you're trying to build a pretty interactive site, you're probably going to want to use it in the end anyway, so I'd bite the bullet and pick it up now. You can remove the last line in categories' click function if you don't want it swapping out the current image with the old text when you click it.

This does work and I will try to pick up on jQuery, but I have one problem with it, when I click on it, I can't select any of the other options (except for the first option), as I have this:

<br><br>
<label for="paragraphStyle">Style of paragraph:</label>
<select name="paragraphStyle" id="paragraphStyle">
    <option value="normal">Normal</option>
    <option value="title">Title</option>
    <option value="subtitle">Subtitle</option>
    <option value="h1">h1</option>
    <option value="h1">h1</option>
    <option value="h2">h2</option>
    <option value="h3">h3</option>
    <option value="h4">h4</option>
    <option value="h5">h5</option>
    <option value="h6">h6</option>
</select>

Underneath the div and I don't want to ruin the styling I have, so is it possible to fix this problem of mine?

Edit: I have just noticed that the option divs are not in line with the part that you click, it doesn't really matter if it is offset, but it drives me crazy now that I do know now, so I would like to fix that.

 

[CodeMonkeyJ]

I can't really tell why you can't select the other options, it's working for me. Change your CSS to the following to polish it up a bit. The position and z-indexes will put the options on top of the next section. The margin on category lines up the images (the clickable part has a 1px border, which is why it's not lining up). What happens when you click another option?

.categories {
    width:150px;
    height:20px;
    border:solid 1px green;
    background:#e1e1e1;
    z-index: 10000;
}
.category {
    display:none;
    z-index:10000;
    position:relative;
    margin:1px;
}

 

[Officer Erik 1K-88]

I can't really tell why you can't select the other options, it's working for me. Change your CSS to the following to polish it up a bit. The position and z-indexes will put the options on top of the next section. The margin on category lines up the images (the clickable part has a 1px border, which is why it's not lining up). What happens when you click another option?

Thanks, this did work, but it still doesn't line up the way that I want it to, I will show you:

As you can see in the image it doesn't line up the way that I would like it to; by the way, the image above is with the things you told me could help, here is the CSS to it:

.categories {
    width: 25px;
    height: 25px;
    border: solid 1px green;
    padding: 2px;
    background: #e1e1e1;
    z-index: 10000;
}
.category {
    display: none;
    width: 25px;
    height: 25px;
    border: solid 1px green;
    padding: 2px;
    background: #e1e1e1;
    z-index: 10000;
    position: relative;
    margin: 1px;
}

Now, I do like the styling to it, but it is just that little offset that is driving me crazy, I tried everything I could think of with trying to fix that, which was messing around with margin, but none of it worked, so I don't know what to do with fixing that.

 

[CodeMonkeyJ]

I can't say exactly, as I don't have the full code, but I suspect that it's the padding the margin. It can't really be anything else (border, maybe?). Use the developer tools (F12), use the inspect tool to select the element that is offset, and use the Layout tab (Firefox) or Computed tab (Chrome) to view them. Firefox seems easier and has editable fields. See if any of those are obviously at fault and try to adjust the CSS for them accordingly. In Firefox, you can edit the values in real time to make it line up first, so I'd try that.