OnClick of anchor tag the content should not be displayed

Question

I have a header element inside which is an anchor element is present. Below is the code:

<h3 class="header"><a href="http://www.google.com">Google</a></h3>

On click of the header element, some text appears below. To do this I have used jQuery. Below is the code:

$('.header').click(function() {
  $header = $(this);
  $anchor = $header.find("a");
  $content = $header.next();        // Get next element
  $content.slideToggle(100, function() {
    $content.is(":visible") ? $anchor.css({'color': 'white'}) : $anchor.css({'color': '#1818bd'});
    $content.is(":visible") ? $header.css({'background-color': 'black'}) : $header.css({'background-color': '#cccccc'});
  });
});

On hover of the anchor element, the text changes to red color. Below is the code:

a:hover {color: red;}

Issue 1: On click of the anchor element, I don't want the text content below to appear. This should happen only on clicking the header element which is happening as expected.

Issue 2: After clicking on the header element the text content below it appears. Now if I hover over the anchor element, the text color doesn't change to red.

Below is the js fiddle link: https://jsfiddle.net/heisenberg_kl3/np5pmqLq/

Issue 2 is solved. Please provide a solution to issue 1.

Your first issue is solved in this question: http://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli — Wampie Driessen, Apr 10 '17 at 07:42

Syam Pillai · Accepted Answer · 2017-04-10T07:51:32.147

Changes:

javaScript (issue 1):

$('.header a').click(function(e) {
  e.stopPropagation();
});

css (issue 2):

a:hover {color: red !important;}

Complete solution:

$('.header').click(function() {
 $header = $(this);
  $anchor = $header.find("a");
  $content = $header.next();  // Get next element
  $content.slideToggle(100, function() {
   $content.is(":visible") ? $anchor.css({'color': 'white'}) : $anchor.css({'color': '#1818bd'});
   $content.is(":visible") ? $header.css({'background-color': 'black'}) : $header.css({'background-color': '#cccccc'});
  });
});

$('.header a').click(function(e) {
 e.stopPropagation();
});

h3 {
 width: 84.7%;
 margin: 0;
 padding-top: 2px;
 padding-left: 10px;
 padding-bottom: 5px;
  background: #cccccc;
}
a {
  text-decoration: none;
 color: #1818bd;
}
a:hover {color: red !important;}
.box {
 width: 85%;
 margin: 0;
 padding-top: 5px;
 padding-left: 5px;
 padding-bottom: 5px;
 border-style: solid;
 border-color: #336699;
  border-width: 1px;
  display: none;
}

<div>
  <h3 class="header"><a href="http://www.google.com">Google</a></h3>
  <p class="box">
    Vist google for searching anything.
  </p>
</div>
<br/>
<div>
  <h3 class="header"><a href="http://www.amazon.com">Amazon</a></h3>
  <p class="box">
    Vist amazon for online shopping.
  </p>
</div>
<br/>
<div>
  <h3 class="header"><a href="http://www.youtube.com">YouTube</a></h3>
  <p class="box">
    Vist youtube to watch videos.
  </p>
</div>

Demo here

@AlivetoDie `$('.header a').click(function(e) { e.stopPropagation(); });` this is for his first issue? read the question carefully first. the entire solution is for clarity. — Syam Pillai, Apr 10 '17 at 07:52
i am not a down-voter man. And that's why i removed my comment — Alive to die - Anant, Apr 10 '17 at 07:58

score 0 · Answer 2 · 2017-04-10T07:57:52.710

you most change selector:

$('.header a').click(function() { //header a
  $header = $(this);
  $anchor = $header.find("a");
  $content = $header.next();        // Get next element
  $content.slideToggle(100, function() {
    $content.is(":visible") ? $anchor.css({'color': 'white'}) : $anchor.css({'color': '#1818bd'});
    $content.is(":visible") ? $header.css({'background-color': 'black'}) : $header.css({'background-color': '#cccccc'});
  });
});

white color becouse you Predetermined css style. You most change selector and change class on your.

Update. You code is next:

$(document).ready(function () {

  $('.header').click(function() {
    $header = $(this);
    $anchor = $header.find("a");
    $content = $header.next();  // Get next element
    $content.slideToggle(100, function() {
        $header[$content.is(":visible") ? 'addClass' : 'removeClass']('visible')
    });
  });

})

h3 {
 width: 84.7%;
 margin: 0;
 padding-top: 2px;
 padding-left: 10px;
 padding-bottom: 5px;
  background: #cccccc;
}
a {
  text-decoration: none;
 color: #1818bd;
}

.box {
 width: 85%;
 margin: 0;
 padding-top: 5px;
 padding-left: 5px;
 padding-bottom: 5px;
 border-style: solid;
 border-color: #336699;
  border-width: 1px;
  display: none;
}

.header.visible {
  background-color: black;
}
.header.visible a {
  color:white
}
a:hover,.visible a:hover {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <h3 class="header" class="visible"><a href="http://www.google.com">Google</a></h3>
  <p class="box">
    Vist google for searching anything.
  </p>
</div>
<br/>
<div>
  <h3 class="header"><a href="http://www.amazon.com">Amazon</a></h3>
  <p class="box">
    Vist amazon for online shopping.
  </p>
</div>
<br/>
<div>
  <h3 class="header"><a href="http://www.youtube.com">YouTube</a></h3>
  <p class="box">
    Vist youtube to watch videos.
  </p>
</div>

If I change the color from white to red in the script then it will appear red even when I don't hover over the text. It has to be red on hover and white otherwise. — Kalyan Srinivas Limkar, Apr 10 '17 at 07:46
Please consider editing your answer because it's lacking information. It's hard to determine the code change and your two "sentences" don't really make sense. — Clijsters, Apr 10 '17 at 07:47

OnClick of anchor tag the content should not be displayed

2 Answers2