Adding a id to to link to a class

Question

Hi guys I am trying to add an id to a link so that it can produce some content. For example I have a button which when clicked will show a div with text inside of it. That div is hidden, This works perfectly, I want to try and reproduce this using anther button with an icon this time but for some reason I cant get it to work at all:

For my button to work all I needed to do was have :

  <button type="button" class="btn btn-warning" id="header2">Reklambyrå</button>

The ID was linked to some JS which showed me the content : JS:

$("#header1").click(function() {
  $("#section_one").fadeToggle(2000);
  $("#section_two").fadeOut(1000);
});

This works fine but when I put this html in:

<div class="sidebar-social">
    <ul>
        <li>
            <a href="#" title="Facebook" target="_blank" rel="nofollow" id="header1">
                <i class="fa fa-paint-brush"></i>
                <span id="header1">facebook</span>
            </a>
        </li>
        <li><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-mobile"></i><span>twitter</span></a></li>
    </ul>
</div>

Now I want the facebook icon to link to the same content as the button but I cant seem to get it to work at all, Any ideas?

Thanks

Answer 1

Change your function to

$("#header2").on('click',function (e) {
    e.preventDefault();
    $("#section_two").fadeToggle(2000);
    $("#section_one").fadeOut(1000);
});

and remove duplicate header1 id in your HTML and target="_blank" from the anchor

Answer 2

The id is supposed to be unique so your script runs only for the first occurrence. You could either change your selector to treat id as just another attribute (it would work but I wouldn't do that) or introduce a new attribute to both buttons.

A selector treating id as an attribute would look like this:

$("*[id='header1']").click(function() {
  $("#section_one").fadeToggle(2000)
  $("#section_two").fadeOut(1000);
});

if you chose to introduce a new attribute to the buttons your html would look like this:

<li>
    <a href="#" title="Facebook" target="_blank" rel="nofollow" data-type="produce-content"><i class="fa fa-paint-brush"></i>
  <span>facebook</span></a>
</li>

and your selector:

$("*[data-type='produce-content']").click(function() {
  $("#section_one").fadeToggle(2000)
  $("#section_two").fadeOut(1000);
});

The first way would make it easy for you to debug and make sure it works as expected but I would strongly advice against it because id's should be unique.

Answer 3

The problem is that you have more that 1 element with id #header1 which causes the script only to work for the first #header1 which is the button. You are not allowed to have duplicate ids, so i changed the id's.

You should use a class that is common to the elements you want to click. For example add class .clickME to the button and .clickME to the a Facebook.

Or if you have only one id with #header1 then just use that.

Then in the click function add .preventDefault() so the link won't follow the href but instead do what you intended it to do

$("#header1").click(function(e) {
   e.preventDefault()
      $("#section_one").fadeToggle(2000);
      $("#section_two").fadeOut(1000);
    });
    $("#header2").click(function() {
      $("#section_two").fadeToggle(2000);
      $("#section_one").fadeOut(1000);
    });

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.parallax1 {
  padding-left: 30px;
  margin-top: 33px;
  display: none;
}

.sidebar-social {
  margin: 0;
  padding: 0;
}

.sidebar-social ul {
  margin: 0;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-social li {
  text-align: center;
  width: 15.9%;
  margin-bottom: 3px!important;
  background-color: #fff;
  border: 1px solid #eee;
  display: inline-block;
  font-size: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-social i {
  display: block;
  margin: 0 auto 10px auto;
  width: 32px;
  height: 32px;
  margin: 10px auto 0;
  line-height: 32px;
  text-align: center;
  font-size: 20px;
  color: #383533;
  margin-top: 0;
  padding-top: 5px;
}

.sidebar-social a {
  text-decoration: none;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

.sidebar-social a span {
  color: black;
  font-size: 10px;
  padding: 5px 0 10px 0;
  display: block;
  text-transform: uppercase;
  font-family: 'Josefin Sans';
  letter-spacing: 1px;
}

.sidebar-social a:hover i.fa-paint-brush {
  color: #FFC600;
}

.sidebar-social a:hover i.fa-mobile {
  color: #FFC600
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="sidebar-social">

      <ul>
        <li>
          <!-- 	  Problem here  -->
          <a href="#" title="Facebook" target="_blank" rel="nofollow" class="clickME" id="header1"><i class="fa fa-paint-brush" id="header1"></i>
      <span id="header1span">facebook</span></a></li>
        <!-- 	   -->

        <li><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-mobile"></i><span>twitter</span></a>
        </li>
      </ul>


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




<div class="parallax1" id="section_one">
  <div class="row newtryh2">
    <div class="col-xs-12 col-sm-6 col-md-6 middlethat">
      <h2>WiFi via Facebook</h2><span class="border"></span>

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