How to underline active div

Question

I am trying to make a jQuery function for switching between two divs, but I don't know how to make an "active" link underlined. Like link with selected div.

Here is the code:

JS:

function toggleDiv(target) {

    var div = document.getElementById('wrapper').getElementsByTagName("div");

    if (target == 1) {
        div[0].style.display = 'none';
        div[1].style.display = 'block';
    } else {
        div[0].style.display = 'block';
        div[1].style.display = 'none';
    }

};

HTML:

<div id="button" onclick="toggleDiv(0)" style="padding-right: ;">
  <p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p>
</div>

<div id="button2" onclick="toggleDiv(1)" style="padding-left: ;">
  <p align="center">PSYCHOLOGIE PRÁCE</p>
</div>    

Answer 1

Why not just add text-decoration:underline?

div[active].style.textDecoration = "underline";
div[inactive].style.textDecoration = "none";

Replace active and inactive with the correct indeces.

---

I'm also going to suggest a more dynamic solution, because yours is very rigid. Try this:

$("div").click(function() {
  $("div").removeClass("active");
  $(this).addClass("active");
});

div {
  display: inline-block;
  background-color: #222222;
  border-radius: 2px;
  padding: 5px 10px;
  margin: 5px;
  color: #eeeeee;
  box-sizing: border-box;
  transition: all .2s;
}
div.active {
  text-decoration: underline;
  background-color: #2222ee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click</div>
<div>On</div>
<div>One</div>
<div>Of</div>
<div>These</div>

Answer 2

.active {
    border-bottom: solid;
} 

add this css to your page and you can apply this class to any element, it will have an underline effect

Answer 3

Try this:

function toggleDiv(target) {

var div = document.getElementById('wrapper').getElementsByTagName("div");

div[target].css('textDecoration ', 'underline')
if (target == 1) {
    div[0].style.display = 'none';
    div[1].style.display = 'block';
} else {
    div[0].style.display = 'block';
    div[1].style.display = 'none';
}

};

Answer 4

I would recommend using a class "active" and in the begining, add this class to one of the divs. When an action occurs, do something like this:

$(document).ready(function(){
    $("div").click(function(){
        $("div").toggleClass("active);
    });
});

this way, the active becomes inactive, and the inactive becomes active.

<div class="active" style="padding-right: ;">
<p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p>
</div>

<div style="padding-left: ;">
<p align="center">PSYCHOLOGIE PRÁCE</p>
</div>    

Mix it with some css code:

.active{
  text-decoration:underline;
}

Answer 5

Something like this?

$(document).on('click', '.my-button', function(e) {
  $(this).addClass('div-underline').siblings('.my-button').removeClass('div-underline');;
});

.my-button {  }
.div-underline { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="my-button"><p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p></div>
<div class="my-button"><p align="center">PSYCHOLOGIE PRÁCE</p></div>

Or This?

$(document).on('click', '.my-button', function(e) {
  $(this).addClass('div-underline').siblings('.my-button').removeClass('div-underline');;
});

.my-button { padding-bottom: 1px; }
.div-underline { border-bottom: 1px solid; padding-bottom: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="my-button"><p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p></div>
<div class="my-button"><p align="center">PSYCHOLOGIE PRÁCE</p></div>

Or more like this?

$(document).on('click', '.my-button', function(e) {
  $(this).addClass('div-underline').siblings('.my-button').removeClass('div-underline');;
});

.my-button p { padding-bottom: 1px; }
.div-underline p { padding-bottom: 0; border-bottom: 1px solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="my-button"><p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p></div>
<div class="my-button"><p align="center">PSYCHOLOGIE PRÁCE</p></div>

Answer 6

Here's my answer:

<html>
<head>
    <meta charset="UTF-8">
    <style>
        #wrapper {
            width:200px;
            height:150px;
            border:solid 2px black;
        }
        #wrapper .active{
            background-color:black;
            color:lightblue;
        }
    </style>
    <script type="text/javascript">
        var activeControl = new Object();

        function setMyActiveControl(e){
            if (e != activeControl){
                removeActive();
                e.className = 'active';
                activeControl = e;
            }
        }
        function removeActive(){
            var div = document.getElementById('wrapper').getElementsByTagName("div");
            for (i in div){
                if (div.item(i).className == 'active') div[i].className = '';
            }

        }
    </script>
</head>

<body id=wrapper>
    <div id=button1 onclick="setMyActiveControl(this);"><p align="center">button 1</p></div>
    <div id=button2 onclick="setMyActiveControl(this);"><p align="center">button 2</p></div>
    <div id=button3 onclick="setMyActiveControl(this);"><p align="center">button 3</p></div>
    <div id=button4 onclick="setMyActiveControl(this);" class='active'><p align="center">button 4</p></div>
</body>

things to note:

in your code you access the elements as:

div[0]

instead, use:

div.item(0)

also, you are changing the inline css when you access the style object on the div. the problem is, you did not declare display on the inline style, so it is undefined or defined somewhere else in the cascade. this can cause all kinds of problems with your code doing it this way. it's best, as others have already pointed out, to use a class in the style sheet.

i hope this helps.