CODEWITHSUNDEEP
javascriptcss
scott fuller
scott fuller

Reputation: 23

Controlling multiple CSS events with single Function

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>

Upvotes: 0

Views: 289

Answers (5)

black_pottery_beauty
black_pottery_beauty

Reputation: 879

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

Upvotes: 0

J&#233;r&#233;mie L
J&#233;r&#233;mie L

Reputation: 775

  • 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');
}

Upvotes: 0

moolsbytheway
moolsbytheway

Reputation: 1291

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>

Upvotes: 0

niboc
niboc

Reputation: 71

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.

Upvotes: 0

serraosays
serraosays

Reputation: 7849

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");
});

Upvotes: 1

Related Questions