Add dynamic icon beside <a> tag-CodePudding

I am trying with this

I was trying with the following code example but still no luck.

$('#nav li').each(function(i) {
$(this).append('<i ></i>')})

How can I add the icon beside tag in the given example?

CodePudding user response：

You can try something like this,and modify the code accordingly for your needs.

Play with it here

// "READMORE" ELEMENT CONSTRUCTOR FUNCTION
const readMore = (textObj) => {
  const span = document.createElement("span")
  span.classList = "readMore"
  span.dataset.text = textObj
  const text = document.createElement("span")
  text.className = "readMoreText"
  text.innerText = "Show more"
  const icon = document.createElement("i")
  icon.classList = "icon fas fa-angle-down"
  span.append(text)
  span.append(icon)
  return span
}
const more = document.querySelectorAll(".more") //GET ALL "MORE" ELEMENTS

//ITERATE OVER ALL "MORE" ELEMENTS
more.forEach(more => {
const content = more.querySelector(".content") //GET CONTENT 
const full_text = content.innerText //GET TEXT OF CONTENT,WE NEED IT TO PASS IT TO "READMORE" FUNCTION
const short_text = full_text.substring(0, 100)   '...' //CREATE SHORT VERSION
content.innerText = short_text //SWAP CONTENT FOR SHORT VERSION
  more.appendChild(readMore(JSON.stringify({ full: full_text, short: short_text }))) //ADD "READMORE" ELEMENT TO "MORE" ELEMENT AND PASS TEXT DATA
})


//CLICK HANDLER FOR ALL 'READMORE' ELEMENTS
$(".readMore").click(function(){
const short_text = $(this).data("text").short //GET SHORT VERSION
const full_text = $(this).data("text").full //GET LONG VERSION

if ( $(this).find(".icon").hasClass("rotate") ){
  $(this).find(".icon").removeClass("rotate")
  $(this).parent().find(".content").text(short_text)
  $(this).find(".readMoreText").text("Show more")
}else{
  $(this).find(".icon").addClass("rotate")
  $(this).parent().find(".content").text(full_text)
  $(this).find(".readMoreText").text("Show less")
}

});

$(".readMore").hover(function () {
  $(this).parents(".more").css("background", "rgb(234, 234, 234)");
}, function () {
    $(this).parents(".more").css("background", "rgb(243, 243, 243)");
});

.more{
width: 500px;
background: rgb(243, 243, 243);
padding: 5px;
}

.readMore{
cursor: pointer;
user-select: none;
color: indianred;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 0.9em;
}
.readMore:hover{
color: rgb(104, 104, 223);
}

.fa-angle-down{
margin-left: 0.2em;
animation: rotationBack 0.8s;
height: 13px;
}

.rotate{
transform: rotate(180deg);
animation: rotation 0.8s;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes rotationBack {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

<html>

<head>
    <title>jQuery Read More/Less Toggle Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
        integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"
        integrity="sha512-fzff82 8pzHnwA1mQ0dzz9/E0B ZRizq08yZfya66INZBz86qKTCt9MLU0NCNIgaMJCgeyhujhasnFUsYMsi0Q=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
    <div >
    <span >
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </span>
    </div>
    <br /><br />
    <div >
    <span >
        Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus,
        feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia
        ultricies nec eget tellus. Curabitur id sapien massa. In hac
        <a href="#">habitasse</a> platea dictumst. Integer tristique leo
        consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius
        purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id
        rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque
        eget tempor massa.
    </span>
    </div>
</body>

</html>

CodePudding user response：

I have managed to solve the problem by implementing few lines to HTML and to JS.

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>jQuery Read More/Less Toggle Example</title>
  </head>
  <body>...
  </body>
</html>

var moretext = "Show more <i class='fa fa-angle-down'></i>";
var lesstext = "Show less <i class='fa fa-angle-up'></i>";