Facing issue with a toggle component

Avatar

Avatar
Level 1
Sayali1
Level 1

Likes

0 likes

Total Posts

5 posts

Correct reply

0 solutions
View profile

Avatar
Level 1
Sayali1
Level 1

Likes

0 likes

Total Posts

5 posts

Correct reply

0 solutions
View profile
Sayali1
Level 1

05-06-2020

Hi,

I have created a footer component that shows n number of links and hides all the other with a show hide button to show the remaining links based on user click. The first component authored works fine but the rest of the components authored are not responsive at all and the toggle functionality fails to work if the same component is authored multiple times on the page.

Please find the below sample code of the component:

HTML Code:

<div data-sly-test="${wcmmode.edit}" data-sly-unwrap>
<div data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-unwrap>
<clientlib data-sly-call="${clientLib.all @ categories=['author.widget.multifieldpanel']}" data-sly-unwrap/>
</div>
</div>
<div>
<div class="outer">
<div class="title" id="alen">${properties.mtitle}</div>
<div data-sly-use.myClass="${'com.utilities.widgets.Multifield' }" data-sly-unwrap>
<div data-sly-list="${myClass.myHashMap}" data-sly-unwrap>


<div data-sly-test="${itemList.count <= 6}">
<a id="alink " value=" ${itemList.count}" class="link" href="${item['linkpath']}">${item['title'] @ context="html"}</a>
</div>
<div data-sly-test="${itemList.count > 6}">
<a id="alink" value=" ${itemList.count}" class="link hide-more" href="${item['linkpath']}">${item['title'] @ context="html"}</a>
</div>
</div>

</div>
</div>
<sly data-sly-test="${properties.multitotal}">
<div class="link-toggle" id="moreli" >See More</div>
<div class="link-toggle expand-option" id="lessli" >See Less</div>
</sly>

</div>


$("#moreli").click(function() {
$("#moreli").css("display", "none");
$("#lessli").css("display", "block");
$(".hide-more").css("display", "block");
});

$("#lessli").click(function(){
$("#lessli").css("display", "none")
$("#moreli").css("display", "block");
$(".hide-more").css("display", "none");
});

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

27-06-2020

Javscript logic is wrong -

It should be like

$("#moreli").click(function() {
$( this ).css("display", "none");
$( this ).sinbling("#lessli").css("display", "block");
$( this ).sinbling(".hide-more").css("display", "block");
});

 Above cpde is just for reference, please implement logic based on current(this) object to deal with individual instance. 

Answers (0)