Controlling multiple CSS events with single Function

Question

I am struggling to change CSS based on user actions with some script. Currently I have each navBar button performing 5 functions onClick. 1 each to change the CSS of 5 different divs. Since I am newer to scripting, I wanted to make an example similar to what I am doing in order to refer back in the future as well as hopefully help out the next person to come along.

Can someone please help me with this short example? I have tried many various scripts and just end up destroying my spirits.

For this, I want to click an openButton in the navBar and have it change the width (essentially open) a corresponding div on the page.

<div id="navBar">
 <a id="div1OpenButton" class="openButton" onClick="openDiv()">div1</a>
 <a id="div2OpenButton" class="openButton" onClick="openDiv()">div2</a>     
 <a id="div3OpenButton" class="openButton" onClick="openDiv()">div3</a>
</div>

<div id="main">
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
</div>

<style>
 #div1 {width: 0px;}
 #div2 {width: 0px;}
 #div3 {width: 0px;}
</style>

serraosays · Accepted Answer · 2016-08-30 15:48:14Z

1

Don's use onclick within your HTML - that is bad practice. You want a separation of concerns, with your JS in a separate file.

If you use jQuery (which a good library for a use-case like this), you can use its powerful selector to select all five elements at the same time. jQuery's selector is nice for beginners because it's identical to how you use selectors in CSS.

I also like to attach my JS to my HTML via IDs, not classes. This way, you know your JS has unique HTML targets to attach to.

Putting all of this together, use the jQuery selector to select all buttons, then use a .click() event to encapsulate your CSS manipulation in an anonymous function:

$(".openButton").click(function() {
  $("#div1, #div2, #div3").css("width", "500px");
});

answered Aug 30, 2016 at 15:48

serraosays

8,0693 gold badges38 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VikingBlooded Over a year ago

I would add here that you should really not code your css into your jquery, You should have classes in your css that get applied to your elements or removed based on your actions.

black_pottery_beauty Over a year ago

This is using jquery he is asking to answer using javascript rather jquery

niboc · Accepted Answer · 2016-08-30 15:52:46Z

0

There are better ways to do it, but following the line of your code, you must pass a param to your openDiv function such as the ID of the element you want to show.

<a id="div1OpenButton" class="openButton" onClick="openDiv('div1')">div1</a>

Your onClick function must to hide all divs inside your "main" and show only the id you just passed by param.

If you need more help, paste your code please.

answered Aug 30, 2016 at 15:52

niboc

716 bronze badges

Comments

moolsbytheway · Accepted Answer · 2016-08-30 16:00:31Z

Try this

<html><head>
<script src=path/to/jquery.js></script>
</head><body>
<div id="navBar">
<!-- openDiv(1) with "1" is the div number -->
 <a id="div1OpenButton" class="openButton" onClick="openDiv(1)">div1</a>
 <a id="div2OpenButton" class="openButton" onClick="openDiv(2)">div2</a>     
 <a id="div3OpenButton" class="openButton" onClick="openDiv(3)">div3</a>
</div>

<div id="main">
 <div id="div1">div1 opened</div>
 <div id="div2">div2 opened</div>
 <div id="div3">div3 opened</div>
</div>

<style>
div#main div {overflow:hidden;width:0px} //to hide div content while closed

</style>

<script>

function openDiv(n) {
$('#div'+n).width(400);} // set width to 400px
</script>
</body></html>

OR without the inline onClick()

<html><head>
<script src=path/to/jquery.js></script>
</head><body>
<div id="navBar">
 <a id="div1" class="openButton" >div1</a>
 <a id="div2" class="openButton" >div2</a>     
 <a id="div3" class="openButton" >div3</a>
</div>

<div id="main">
 <div id="div1">div1 opened</div>
 <div id="div2">div2 opened</div>
 <div id="div3">div3 opened</div>
</div>

<style>
div#main div {overflow:hidden;width:0px} //to hide div content while closed

</style>

<script>

$('a.openButton').click(function() {
var itm = $(this).attr("id");
$("#main div#"+itm).width(400);} );// set width to 400px
</script>
</body></html>

Jérémie L · Accepted Answer · 2016-08-30 16:43:03Z

Firstly, don't mix HTML, CSS and JavaScript in the same file. You should write your JavaScript code in a .js file, and your styles in an external stylesheet ;
Add handlers on events in your JavaScript code by using element.addEventListener() ;
Use data attributes on your buttons to link them with target divs.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>My page</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div id="navBar">
      <a class="openButton" data-target="div1">div1</a>
      <a class="openButton" data-target="div2">div2</a>
      <a class="openButton" data-target="div3">div3</a>
    </div>

    <div id="main">
      <div id="div1" class="container hide"></div>
      <div id="div2" class="container hide"></div>
      <div id="div3" class="container hide"></div>
    </div>
  </body>
</html>

And in the script.js file:

document.addEventListener('DOMContentLoaded', function(event) {
  var divs = document.querySelectorAll('.openButton');

  for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', openDiv);
  }
});

function openDiv(e) {
  // Use e.target.dataset.target

  // Add 'hide' class on all containers
  var containers = document.querySelectorAll('.container');
  for (var i = 0; i < containers.length; i++) {
    containers[i].classList.add('hide');
  }

  // Remove 'hide' class on the container to display
  document.getElementById(e.target.dataset.target).classList.remove('hide');
}

it is all in separate files, also i should have noted that when 1 div receives a change in width, i'd like the others to return to 0px.
If anyone was curious, i tried all the solutions and this one worked best. I did forego the adding of a class and added width directly, only because I need the "slide in" appearance achieved with the css of transitions which does not work if you add it within a class. Thank you everyone for posting!

sidgate · Accepted Answer · 2016-08-30 21:16:18Z

0

<a id="div1OpenButton" class="openButton" onClick="openDiv(this)">div1</a>
<script>
    function openDiv(e){
      document.getElementById(e.innerHTML).style.width= '20px'
    }
</script>

edited Aug 30, 2016 at 21:16

sidgate

15.3k12 gold badges76 silver badges132 bronze badges

answered Aug 30, 2016 at 15:54

black_pottery_beauty

8798 silver badges17 bronze badges

Collectives™ on Stack Overflow

Controlling multiple CSS events with single Function

5 Answers 5

2 Comments

Comments

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

3 Comments

Comments

Related