1

I have 3 divs. I want that when I click on first div then set box-shadow on it and when I click on second div then set box-shadow on it also remove box-shadow on first div.

These are 3 divs

$(document).ready(function() {
  $(".boxshadow").on('focus', function() {
    $(this).css({
      "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707"
    });
  });
  $(".boxshadow").on('blur', function() {
    $(this).css({
      "box-shadow": "inset 0 0px 0px #dab6b6, 0 0 0px #da0707"
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Bravo Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-warning ">
          <i class="now-ui-icons media-1_button-power"></i>
        </div>
        <h3 class="card-title" style="color: #333;">10$</h3>
        <ul>
          <li style="color: #888;">Complete documentation</li>
          <li style="color: #888;">Working materials in Sketch</li>
        </ul>

      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing">
      <h6 class="card-category"> Alpha Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-primary ">
          <i class="now-ui-icons objects_diamond"></i>
        </div>
        <h3 class="card-title">69$</h3>
        <ul>
          <li>Working materials in EPS</li>
          <li>6 months access to the library</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Charlie Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-success ">
          <i class="now-ui-icons media-2_sound-wave"></i>
        </div>
        <h3 class="card-title" style="color: #333;">69$</h3>
        <ul>
          <li style="color: #888;">Working materials in PSD</li>
          <li style="color: #888;">1 year access to the library</li>
        </ul>
      </div>
    </div>
  </div>

</div>

I am giving the same class name on all 3 divs.Issue is that when I click on div then is not focus.

Saeed
  • 5,413
  • 3
  • 26
  • 40
Arslan
  • 21
  • 1
  • 7

9 Answers9

1

You can use style ["boxShadow"] or style.boxShadow

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testDiv" onclick="myFunction();">this is my content..click here for applicate the box-shadow</div>
<script>
function myFunction(){
document.getElementById("testDiv").style["boxShadow"] = "0 0 5px #999999";
}

More About this

Link JsFiddle

Diego Avila
  • 700
  • 7
  • 24
1

Any event occurred in divs, first clear all borders and then add to specific on. Your JQuery selector also is wrong boxshodow or boxShodow.

$(document).ready(function() {
  $(".boxShadow").on('click', function() {
    $(".boxShadow").each(function() {
      $(this).css({
        "box-shadow": "none"
      });
    })
    $(this).css({
      "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707"
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Bravo Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-warning ">
          <i class="now-ui-icons media-1_button-power"></i>
        </div>
        <h3 class="card-title" style="color: #333;">10$</h3>
        <ul>
          <li style="color: #888;">Complete documentation</li>
          <li style="color: #888;">Working materials in Sketch</li>
        </ul>

      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing">
      <h6 class="card-category"> Alpha Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-primary ">
          <i class="now-ui-icons objects_diamond"></i>
        </div>
        <h3 class="card-title">69$</h3>
        <ul>
          <li>Working materials in EPS</li>
          <li>6 months access to the library</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Charlie Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-success ">
          <i class="now-ui-icons media-2_sound-wave"></i>
        </div>
        <h3 class="card-title" style="color: #333;">69$</h3>
        <ul>
          <li style="color: #888;">Working materials in PSD</li>
          <li style="color: #888;">1 year access to the library</li>
        </ul>
      </div>
    </div>
  </div>
</div>
Saeed
  • 5,413
  • 3
  • 26
  • 40
0

There is an uppercase in boxShadow, and you do not have one in your jQuery selector, is it the problem ?

ElPuerto
  • 43
  • 1
  • 9
0

It is because as you have given same class name for all the three divs there is no way to differentiate them so when you can focusing on one and then focusing on then other that box shadow wont work properly My recommendation is 1. Use id for each div and in a loop get the use getElementById(i); for using the element and changong the box shadow . i is thr iteration count of the loop Or 2. Use javascript querySelectorall() with same class name and it will return an array with the element and with the position change the box shadow

Aniketh Saha
  • 843
  • 10
  • 22
0
$('.box-shadow').click(function () {
    $(this).css('box-shadow','0 2px 3px rgba(0,0,0,0.3)');
});

in jquery.

mahdi momeni
  • 39
  • 4
  • While this snippet may answer the question, it is better to include some context as to how it solves the problem. – JKirchartz May 02 '18 at 18:46
0

You can try this trick

$(document).ready(function() {
  $(".boxshadow").on('focus', function() {
     $(".boxshadow").css({
      "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 0px #da0707"
     });
     $(this).css({
      "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707"
     });
  });
});

Also the class name in your div is boxShadow not boxshadow

Aman Gupta
  • 21
  • 6
0

For infos and curiosity:(not about javascript)

You can use the tabindex attribute to let element catch the focus (via click or tab) and then use the :focus selector in CSS to update style.

[tabindex] {box-shadow:inset 0 1px 1px #dab6b6, 0 0 0px #da0707;transition:0.25s}
[tabindex]:focus {box-shadow:inset 0 1px 1px #dab6b6, 0 0 8px #da0707;}
<div class="row">

  <div class="col-lg-4 col-md-6 boxShadow" tabindex="0">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Bravo Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-warning ">
          <i class="now-ui-icons media-1_button-power"></i>
        </div>
        <h3 class="card-title" style="color: #333;">10$</h3>
        <ul>
          <li style="color: #888;">Complete documentation</li>
          <li style="color: #888;">Working materials in Sketch</li>
        </ul>

      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow" tabindex="0">
    <div class="card card-pricing">
      <h6 class="card-category"> Alpha Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-primary ">
          <i class="now-ui-icons objects_diamond"></i>
        </div>
        <h3 class="card-title">69$</h3>
        <ul>
          <li>Working materials in EPS</li>
          <li>6 months access to the library</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow" tabindex="0">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Charlie Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-success ">
          <i class="now-ui-icons media-2_sound-wave"></i>
        </div>
        <h3 class="card-title" style="color: #333;">69$</h3>
        <ul>
          <li style="color: #888;">Working materials in PSD</li>
          <li style="color: #888;">1 year access to the library</li>
        </ul>
      </div>
    </div>
  </div>

</div>

See also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

Just loop through each div and add/remove a class with box-shadow based on which div is clicked like this:

//get all boxShadow divs
const boxes = document.querySelectorAll('.boxShadow');

// convert them to an array
const boxesArray = Array.from(boxes);

//assign boxShadow to clicked div
function toggleShadow() {
    for(var i = 0; i < boxesArray.length; i++) {
       boxesArray[i].classList.remove('addShadow');
    }
    this.classList.add('addShadow');
}

//detect the div clicked
boxesArray.forEach( function(box) {
    box.addEventListener('click', toggleShadow);
});
    
/* CSS */
.addShadow {
    box-shadow: 5px 10px #888888;
}
<!-- HTML -->
<div class="row">

                <div class="col-lg-4 col-md-6 boxShadow">
                    <div class="card card-pricing card-plain">
                        <h6 class="card-category"> Bravo Pack</h6>
                            <div class="card-body">
                                <div class="card-icon icon-warning ">
                                    <i class="now-ui-icons media-1_button-power"></i>
                                </div>
                                    <h3 class="card-title" style="color: #333;">10$</h3>
                            <ul>
                                <li style="color: #888;">Complete documentation</li>
                                <li style="color: #888;">Working materials in Sketch</li>
                            </ul>

                         </div>
                    </div>
               </div>

                <div class="col-lg-4 col-md-6 boxShadow">
                    <div class="card card-pricing">
                        <h6 class="card-category"> Alpha Pack</h6>
                            <div class="card-body">
                                <div class="card-icon icon-primary ">
                                    <i class="now-ui-icons objects_diamond"></i>
                                </div>
                                    <h3 class="card-title">69$</h3>        
                            <ul>
                                <li>Working materials in EPS</li>
                                <li>6 months access to the library</li>
                            </ul>      
                        </div>  
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 boxShadow">
                    <div class="card card-pricing card-plain">
                        <h6 class="card-category"> Charlie Pack</h6>
                            <div class="card-body">
                                <div class="card-icon icon-success ">
                                    <i class="now-ui-icons media-2_sound-wave"></i>
                                </div>
                                    <h3 class="card-title" style="color: #333;">69$</h3>      
                             <ul>
                                <li style="color: #888;">Working materials in PSD</li>
                                <li style="color: #888;">1 year access to the library</li>
                            </ul>     
                        </div>   
                    </div>
                </div>

            </div>

N.B. Replace box-shadow css property with your own

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
0

$(document).ready(function() {
  $(".boxShadow").on('click', function() {
  $('.boxShadow').removeClass('shadow');
      $(this).addClass('shadow');
  });
});
.shadow{
box-shadow: inset 0 1px 1px #dab6b6, 0 0 8px #da0707;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Bravo Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-warning ">
          <i class="now-ui-icons media-1_button-power"></i>
        </div>
        <h3 class="card-title" style="color: #333;">10$</h3>
        <ul>
          <li style="color: #888;">Complete documentation</li>
          <li style="color: #888;">Working materials in Sketch</li>
        </ul>

      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing">
      <h6 class="card-category"> Alpha Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-primary ">
          <i class="now-ui-icons objects_diamond"></i>
        </div>
        <h3 class="card-title">69$</h3>
        <ul>
          <li>Working materials in EPS</li>
          <li>6 months access to the library</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Charlie Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-success ">
          <i class="now-ui-icons media-2_sound-wave"></i>
        </div>
        <h3 class="card-title" style="color: #333;">69$</h3>
        <ul>
          <li style="color: #888;">Working materials in PSD</li>
          <li style="color: #888;">1 year access to the library</li>
        </ul>
      </div>
    </div>
  </div>

</div>
vicky patel
  • 699
  • 2
  • 8
  • 14