1

I have a list of links displayed with Bootstraps list-group classes. I am trying to add a font-awesome icon to one of the links. I have the jquery code that will change the icon when it is clicked on. The problem is that if I add a span to the link to hold the icon, the icon is shown on the next line. I've found that that is due to the display:block line. If I remove that, the icon is shown on the same line as the link but the overall format of the links lose the appearance of the list-group. Here is my jsfiddle. You can see the first div with the stock class shows the icon on the next line, while the one with my class shows it on one line.

I don't know how to use jsfiddle to show the actual appearance of the links but I hope that doesn't affect the answer. Is there a way to get this to work or should I change the icon code to use onclick with a javascript function?

    <style>
    .my-list-group-item {
     position: relative;
     /*display: block;*/
     padding: 0px 15px; /* adjust here */
     margin-bottom: -1px;
     border: 1px solid #ddd;
     line-height: 1em /* set to text height */
    }
    </style>

    <div class="list-group list-group-flush">
    <div>
    <a class="list-group-item list-group-item-action" href="example.com">Link 1</a>
    <span class="more far fa-thumbs-down" id="parent-1"></span>
    </div>

    <div>
    <a class="my-list-group-item-action" href="example.com">Link 1</a>
    <span class="more far fa-thumbs-down" id="parent-2"></span>
    </div>
    </div>

    <script>
    $(".more").click(function() {  

     var id = this.id;
     $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
    });
    </script>
user3052443
  • 758
  • 1
  • 7
  • 22
  • If I understand correctly ,you want both () to appear in one line , but your code is not working properly because it's not displayed in a single line ! ? – Diyako Dec 24 '19 at 19:26
  • I need the two spans to appear on a single line. If I move the second span before the then everything displays as I want it. But since the second span, which holds the icon, is then part of the link, the jquery function doesn't get called on the click of the icon. If I leave it outside of the link code, the jquery works but the icon appears on a second line. I hope this makes it more clear. – user3052443 Dec 24 '19 at 22:22
  • i solved your problem , if i understand correctly . fixed code has a span tag and a tag in same line under div tag . is it correct ? – Diyako Dec 25 '19 at 12:51
  • Can you show the code so I can take a look? – user3052443 Dec 25 '19 at 14:54

1 Answers1

1

everything in your code is ok , it's all about design . so i found 2 ways for you :

1-with sending span tag in a tag :

$(".more").click(function() {  
 
 var id = this.id;
 $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
 
});
.float-left {
  float: left;
}
.cen {
  height: 100% !important;
  padding : 5px;
  padding-left : 0 !important;
} 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group list-group-flush"> 
<a class=" list-group-item list-group-item-action" href='#'>Link 1
<span class="cen more far fa-thumbs-down float-left mr-1" id="parent-1"></span>
</a>
</div>

2-i used z-index and negative margin :

$(".more").click(function() {  
 
 var id = this.id;
 $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
 
});
span {
  margin-top : -30px !important;
  z-index : 1;
  padding-left : 10px;
  width : 0 !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group list-group-flush"> 
<a class=" list-group-item list-group-item-action" href='#'>Link 1</a>
<span class="cen more far fa-thumbs-down float-left mr-1" id="parent-2">

</span>
</div>

i hope it can fix your problem or maybe give you an idea.

Diyako
  • 651
  • 1
  • 9
  • 24
  • Thank you for the code. However, it doesn't do what I need. I have update my jsfiddle - https://jsfiddle.net/user3052443/7Lakygch/33/ - link 1 is using your code. The ide for this is to display a link to a page and if there are pages related to it, then the down icon will display them. But with link 1, it is all one link so that won't work. Link 2 and 3 is using your second method but I can't get them to display correctly. Links 4 and 5 show the original problem. They work as I want as far as linking and the up/down part. But only the first icon changes and the appearance is not correct. – user3052443 Dec 25 '19 at 17:19
  • ok for the first step you want : 1- when user clicked on different item , the thumps icon for that item change not for link 1 . 2- Do you want the items to be displayed horizontally or vertically? – Diyako Dec 25 '19 at 18:33
  • This is a list of links. If one of those links has sub-links, then an icon should appear beside it. If the parent link is clicked, it acts as a normal link and loads whatever page it is coded for. But if the icon beside it is clicked, the sub links are shown. The page doesn't not reload in that case. Thank you for your patience in understanding this. I realize it is difficult without being able to see it. Also, in your previous example, you showed the class mr-1. Is that a Bootstrap class or just a typo? – user3052443 Dec 25 '19 at 19:27
  • 1
    yes , it means margin right 1 like pl-1 means padding left -, its not 1px margin or padding you can see all of them in bootstrap doc , i think you can use bootstrap collapse for 2-5 parents , so when user clicked parent 1 it will collapse other parents , take a look at this jfiddle https://jsfiddle.net/0wgr7bms/ – Diyako Dec 25 '19 at 19:49
  • I appreciate your efforts but it still isn't correct. If you add href="somepage" it takes over the span so the icon isn't changed. I took a look at the collapse option but that part of the code is broken so that option is not needed. I think this is more of an css issue than a Bootstrap one. Thanks for explaining the mr-1. I had never seen that before. I will keep playing with it and post here if I find a solution. Thanks again. – user3052443 Dec 26 '19 at 02:44
  • no , dont mention it. im so happy to having conversation about coding stuff .when I see some people having trouble communicating and who don't want to help, they down vote and in anyway they make the question worthless. stack overflow built for helping each other in coding not for being better than anyone. so until your problem not solved i will keep trying whatever i can and it should work . you mean we have a collapse item , when we clicked that item it will collapsing some other item , and when you used href the span not changed when clicked .? – Diyako Dec 26 '19 at 10:14
  • I agree. I have learned so much through this site. It would be far less useful without posters like you. :) What is needed to have a link to a page. That link may have related links that show beneath it. So I need for there to be a way to show and hide the links beneath it. Your code does that fine. But when the parent link has a url add to it, the icon is part of that so the sub-links never show. I've been searching the web for this and there are many examples of adding an icon to a link. But they all include the icon as part of the link. It needs to be outside of the link. – user3052443 Dec 26 '19 at 16:39
  • can you show me an example ? i can't understand what do you want exactly . or maybe show me again your code in jfiddle and write your problem in comment tag . – Diyako Dec 27 '19 at 17:16
  • I've edited https://jsfiddle.net/user3052443/7Lakygch/58/ to show comments. Basically what I need is for a link to a page and an icon to be on the same line. The link acts as a normal link. The icon will expand or collapse the dive the link is in to show more links. The first example works correctly but the icon is on a different line than the link. The last example works correctly for both the link and the icon but the appearance is not correct. Please let me know if it still isn't clear. – user3052443 Dec 28 '19 at 17:22
  • ok now i got what do you mean , can i use js instead of jquery ? i'm not expert in jquery but i can fix this with 5 line js , if its ok ! – Diyako Dec 29 '19 at 14:31
  • That sounds great. Javascript is fine. – user3052443 Dec 30 '19 at 03:30
  • https://codepen.io/AlexGhaemi/pen/GRgvYOg , look at this code , its simple but its exactly what you want – Diyako Dec 30 '19 at 07:46
  • I appreciate the effort but, no, it doesn't work. To see it fail, please change href="#" to href="index.html". Then click on the icon and you will see the code tries to go to another page. It fails in the example since there isn't an index.html file. But here, the other page loads regardless of if the link or the icon is clicked on. – user3052443 Dec 30 '19 at 15:39
  • i changed it and a tag sent me to the href location . your problem is so wierd brother xD – Diyako Dec 31 '19 at 12:27
  • dont try your code in jsfiddle or codepen . try it in your localhost – Diyako Dec 31 '19 at 13:10
  • I tried it in my actual code but it fails as I described. It seems this is beyond the ability of the code in Bootstrap. I will just remove the icon and have the parent link always expanded. My thanks, once again, for all of your efforts. I truly appreciate it. :) – user3052443 Jan 03 '20 at 02:48
  • don't mention it , really i don't know why such an irrational problem should happen , seriously . anyway happy coding beside of happy christmas . – Diyako Jan 03 '20 at 09:06