Expanding and collapsing in UL tagHow do you disable browser Autocomplete on web form field / input tag?Why don't self-closing script elements work?How do you keep parents of floated elements from collapsing?Where should I put <script> tags in HTML markup?RegEx match open tags except XHTML self-contained tagsBootstrap collapsed navbar not expandingHow to click on plus button for expand div then all of div don't be clicked?Bootstrap Accordion - Logic On Alternate Click with JQueryData Toggle image changeExpand and Collapse with multiple buttons and divs
Should the pagination be reset when changing the order?
Is there any actual security benefit to restricting foreign IPs?
How to create template of guides in Illustrator which appears with every document I open?
Delete empty subfolders, keep parent folder
Changing States from child through parent while obeying SOLID principles
Does battery condition have anything to do with macbook pro performance?
What is the origin of the "being immortal sucks" trope?
How often is duct tape used during crewed space missions?
Should I inform my future product owner that there is a good chance that a team member will leave the company soon?
Why are there two bearded faces wearing red hats on my stealth bomber icon?
As a discovery writer, how to complete unfinished novel (which is highly diverted from original plot ) after a time-gap
Neural net with scalar Boolean output for binary classification
Get the encrypted payload from an unencrypted wrapper PDF document
What is the origin of the “clerics can create water” trope?
MySQL - How to check for a value in all columns
What do solvers like Gurobi and CPLEX do when they run into hard instances of MIP
Why can't we use uninitialized local variable to access static content of its type?
How is underwater propagation of sound possible?
Weapon class firing logic in JavaScript
Inquiry answerer
Tips for remembering the order of parameters for ln?
How to convey to the people around me that I want to disengage myself from constant giving?
Why are two-stroke engines nearly unheard of in aviation?
Which museums have artworks of all four ninja turtles' namesakes?
Expanding and collapsing in UL tag
How do you disable browser Autocomplete on web form field / input tag?Why don't self-closing script elements work?How do you keep parents of floated elements from collapsing?Where should I put <script> tags in HTML markup?RegEx match open tags except XHTML self-contained tagsBootstrap collapsed navbar not expandingHow to click on plus button for expand div then all of div don't be clicked?Bootstrap Accordion - Logic On Alternate Click with JQueryData Toggle image changeExpand and Collapse with multiple buttons and divs
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I have the follwing HTML, where there is a collapse (collapsebutton1) and expand button (expandbutton1) which will collapse and expand the div networkDevicesCollapsePanel, this is working as expected.
Now i need to bring the collapse and expand in each < UL >. There are three UL here, but there may be more later. How to achieve this?
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;">
<div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a> <span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span><br />
</li>
</ul>
</div>
</div>
</div>
Button Click code below
$("#expandbutton1").hide();
$("#expandbutton1").click(function ()
$('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
$("#expandbutton1").hide();
$("#collapsebutton1").show();
$('a[data-toggle="collapse"]').each(function (index)
$(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
);
);
$("#collapsebutton1").click(function ()
$('#networkDevicesLinks div.panel-collapse').removeClass('in');
$("#expandbutton1").show();
$("#collapsebutton1").hide();
$('a[data-toggle="collapse"]').each(function (index)
$(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
);
);
});
javascript html css angularjs
edited Mar 28 at 17:38
OneLunch Man
2,1219 silver badges22 bronze badges
asked Mar 28 at 12:48
SmartestVEGASmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
|
show 7 more comments
0
I have the follwing HTML, where there is a collapse (collapsebutton1) and expand button (expandbutton1) which will collapse and expand the div networkDevicesCollapsePanel, this is working as expected.
Now i need to bring the collapse and expand in each < UL >. There are three UL here, but there may be more later. How to achieve this?
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;">
<div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a> <span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span><br />
</li>
</ul>
</div>
</div>
</div>
Button Click code below
$("#expandbutton1").hide();
$("#expandbutton1").click(function ()
$('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
$("#expandbutton1").hide();
$("#collapsebutton1").show();
$('a[data-toggle="collapse"]').each(function (index)
$(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
);
);
$("#collapsebutton1").click(function ()
$('#networkDevicesLinks div.panel-collapse').removeClass('in');
$("#expandbutton1").show();
$("#collapsebutton1").hide();
$('a[data-toggle="collapse"]').each(function (index)
$(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
);
);
});
javascript html css angularjs
edited Mar 28 at 17:38
OneLunch Man
2,1219 silver badges22 bronze badges
asked Mar 28 at 12:48
SmartestVEGASmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
are you asking how to bind the new Expand/Collapse buttons to their respective <UL>?
– Saharsh
Mar 28 at 13:12
yes... i need to add buttons for each UL repeats for expanding and collapsing
– SmartestVEGA
Mar 28 at 13:17
Updated the real code instead of rendered code
– SmartestVEGA
Mar 28 at 13:21
Hi @SmartestVEGA, you basically want to create an accordion within an accordion, right ? Have you looked at similar questions and their answers : stackoverflow.com/search?q=accordion+within+accordion ?
– Jake
Mar 28 at 13:24
those answers are pertaining to jquery and javascript, i need it in angularjs
– SmartestVEGA
Mar 28 at 13:26
|
show 7 more comments
0
0
0
I have the follwing HTML, where there is a collapse (collapsebutton1) and expand button (expandbutton1) which will collapse and expand the div networkDevicesCollapsePanel, this is working as expected.
Now i need to bring the collapse and expand in each < UL >. There are three UL here, but there may be more later. How to achieve this?
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;">
<div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a> <span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span><br />
</li>
</ul>
</div>
</div>
</div>
Button Click code below
$("#expandbutton1").hide();
$("#expandbutton1").click(function ()
$('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
$("#expandbutton1").hide();
$("#collapsebutton1").show();
$('a[data-toggle="collapse"]').each(function (index)
$(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
);
);
$("#collapsebutton1").click(function ()
$('#networkDevicesLinks div.panel-collapse').removeClass('in');
$("#expandbutton1").show();
$("#collapsebutton1").hide();
$('a[data-toggle="collapse"]').each(function (index)
$(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
);
);
});
javascript html css angularjs
edited Mar 28 at 17:38
OneLunch Man
2,1219 silver badges22 bronze badges
asked Mar 28 at 12:48
SmartestVEGASmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
I have the follwing HTML, where there is a collapse (collapsebutton1) and expand button (expandbutton1) which will collapse and expand the div networkDevicesCollapsePanel, this is working as expected.
Now i need to bring the collapse and expand in each < UL >. There are three UL here, but there may be more later. How to achieve this?
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;">
<div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a> <span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span><br />
</li>
</ul>
</div>
</div>
</div>
Button Click code below
$("#expandbutton1").hide();
$("#expandbutton1").click(function ()
$('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
$("#expandbutton1").hide();
$("#collapsebutton1").show();
$('a[data-toggle="collapse"]').each(function (index)
$(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
);
);
$("#collapsebutton1").click(function ()
$('#networkDevicesLinks div.panel-collapse').removeClass('in');
$("#expandbutton1").show();
$("#collapsebutton1").hide();
$('a[data-toggle="collapse"]').each(function (index)
$(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
);
);
});
javascript html css angularjs
javascript html css angularjs
edited Mar 28 at 17:38
OneLunch Man
2,1219 silver badges22 bronze badges
asked Mar 28 at 12:48
SmartestVEGASmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
edited Mar 28 at 17:38
OneLunch Man
2,1219 silver badges22 bronze badges
asked Mar 28 at 12:48
SmartestVEGASmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
edited Mar 28 at 17:38
OneLunch Man
2,1219 silver badges22 bronze badges
edited Mar 28 at 17:38
OneLunch Man
2,1219 silver badges22 bronze badges
edited Mar 28 at 17:38
OneLunch Man
2,1219 silver badges22 bronze badges
2,1219 silver badges22 bronze badges
asked Mar 28 at 12:48
SmartestVEGASmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
asked Mar 28 at 12:48
SmartestVEGASmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
asked Mar 28 at 12:48
SmartestVEGASmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
3,10715 gold badges56 silver badges98 bronze badges
are you asking how to bind the new Expand/Collapse buttons to their respective <UL>?
– Saharsh
Mar 28 at 13:12
yes... i need to add buttons for each UL repeats for expanding and collapsing
– SmartestVEGA
Mar 28 at 13:17
Updated the real code instead of rendered code
– SmartestVEGA
Mar 28 at 13:21
Hi @SmartestVEGA, you basically want to create an accordion within an accordion, right ? Have you looked at similar questions and their answers : stackoverflow.com/search?q=accordion+within+accordion ?
– Jake
Mar 28 at 13:24
those answers are pertaining to jquery and javascript, i need it in angularjs
– SmartestVEGA
Mar 28 at 13:26
|
show 7 more comments
are you asking how to bind the new Expand/Collapse buttons to their respective <UL>?
– Saharsh
Mar 28 at 13:12
yes... i need to add buttons for each UL repeats for expanding and collapsing
– SmartestVEGA
Mar 28 at 13:17
Updated the real code instead of rendered code
– SmartestVEGA
Mar 28 at 13:21
Hi @SmartestVEGA, you basically want to create an accordion within an accordion, right ? Have you looked at similar questions and their answers : stackoverflow.com/search?q=accordion+within+accordion ?
– Jake
Mar 28 at 13:24
those answers are pertaining to jquery and javascript, i need it in angularjs
– SmartestVEGA
Mar 28 at 13:26
are you asking how to bind the new Expand/Collapse buttons to their respective <UL>?
– Saharsh
Mar 28 at 13:12
are you asking how to bind the new Expand/Collapse buttons to their respective <UL>?
– Saharsh
Mar 28 at 13:12
yes... i need to add buttons for each UL repeats for expanding and collapsing
– SmartestVEGA
Mar 28 at 13:17
yes... i need to add buttons for each UL repeats for expanding and collapsing
– SmartestVEGA
Mar 28 at 13:17
Updated the real code instead of rendered code
– SmartestVEGA
Mar 28 at 13:21
Updated the real code instead of rendered code
– SmartestVEGA
Mar 28 at 13:21
Hi @SmartestVEGA, you basically want to create an accordion within an accordion, right ? Have you looked at similar questions and their answers : stackoverflow.com/search?q=accordion+within+accordion ?
– Jake
Mar 28 at 13:24
Hi @SmartestVEGA, you basically want to create an accordion within an accordion, right ? Have you looked at similar questions and their answers : stackoverflow.com/search?q=accordion+within+accordion ?
– Jake
Mar 28 at 13:24
those answers are pertaining to jquery and javascript, i need it in angularjs
– SmartestVEGA
Mar 28 at 13:26
those answers are pertaining to jquery and javascript, i need it in angularjs
– SmartestVEGA
Mar 28 at 13:26
|
show 7 more comments
1 Answer
1
active
oldest
votes
1
It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.
And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount" id="expandbutton1_$index" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="" >
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a> <span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span><br />
</li>
</ul>
</div>
</div>
</div>
Revised Code below:
I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong
<div class="">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a>
<span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span>
<br />
<span style="padding: 2px 12px;">Data Source: nav.DataSource</span>
<br />
<span style="padding: 2px 12px;">Create New: nav.IsCreateNew</span>
<br />
</li>
</ul>
</div>
edited Mar 28 at 14:51
SmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
answered Mar 28 at 13:47
iyyappaniyyappan
6593 silver badges9 bronze badges
almost there some alignment issues ...let me check
– SmartestVEGA
Mar 28 at 13:52
three expand and collapse buttons are sitting together, but ideally it should somewhere near to left side of each repeat, thats the issue
– SmartestVEGA
Mar 28 at 13:54
In this case we need to move expand collapse buttons to ul tag above. and attached with each ul using with CSS
– iyyappan
Mar 28 at 13:57
previus code was better, now when i click on expand, it is opening a popup, more only one collapse button working
– SmartestVEGA
Mar 28 at 14:02
can you revert the previous one please
– SmartestVEGA
Mar 28 at 14:02
|
show 11 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55398059%2fexpanding-and-collapsing-in-ul-tag%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.
And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount" id="expandbutton1_$index" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="" >
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a> <span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span><br />
</li>
</ul>
</div>
</div>
</div>
Revised Code below:
I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong
<div class="">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a>
<span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span>
<br />
<span style="padding: 2px 12px;">Data Source: nav.DataSource</span>
<br />
<span style="padding: 2px 12px;">Create New: nav.IsCreateNew</span>
<br />
</li>
</ul>
</div>
edited Mar 28 at 14:51
SmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
answered Mar 28 at 13:47
iyyappaniyyappan
6593 silver badges9 bronze badges
almost there some alignment issues ...let me check
– SmartestVEGA
Mar 28 at 13:52
three expand and collapse buttons are sitting together, but ideally it should somewhere near to left side of each repeat, thats the issue
– SmartestVEGA
Mar 28 at 13:54
In this case we need to move expand collapse buttons to ul tag above. and attached with each ul using with CSS
– iyyappan
Mar 28 at 13:57
previus code was better, now when i click on expand, it is opening a popup, more only one collapse button working
– SmartestVEGA
Mar 28 at 14:02
can you revert the previous one please
– SmartestVEGA
Mar 28 at 14:02
|
show 11 more comments
1
It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.
And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount" id="expandbutton1_$index" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="" >
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a> <span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span><br />
</li>
</ul>
</div>
</div>
</div>
Revised Code below:
I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong
<div class="">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a>
<span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span>
<br />
<span style="padding: 2px 12px;">Data Source: nav.DataSource</span>
<br />
<span style="padding: 2px 12px;">Create New: nav.IsCreateNew</span>
<br />
</li>
</ul>
</div>
edited Mar 28 at 14:51
SmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
answered Mar 28 at 13:47
iyyappaniyyappan
6593 silver badges9 bronze badges
almost there some alignment issues ...let me check
– SmartestVEGA
Mar 28 at 13:52
three expand and collapse buttons are sitting together, but ideally it should somewhere near to left side of each repeat, thats the issue
– SmartestVEGA
Mar 28 at 13:54
In this case we need to move expand collapse buttons to ul tag above. and attached with each ul using with CSS
– iyyappan
Mar 28 at 13:57
previus code was better, now when i click on expand, it is opening a popup, more only one collapse button working
– SmartestVEGA
Mar 28 at 14:02
can you revert the previous one please
– SmartestVEGA
Mar 28 at 14:02
|
show 11 more comments
1
1
1
It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.
And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount" id="expandbutton1_$index" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="" >
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a> <span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span><br />
</li>
</ul>
</div>
</div>
</div>
Revised Code below:
I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong
<div class="">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a>
<span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span>
<br />
<span style="padding: 2px 12px;">Data Source: nav.DataSource</span>
<br />
<span style="padding: 2px 12px;">Create New: nav.IsCreateNew</span>
<br />
</li>
</ul>
</div>
edited Mar 28 at 14:51
SmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
answered Mar 28 at 13:47
iyyappaniyyappan
6593 silver badges9 bronze badges
It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.
And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount" id="expandbutton1_$index" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="" >
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a> <span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span><br />
</li>
</ul>
</div>
</div>
</div>
Revised Code below:
I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong
<div class="">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_$index">
<li>
<div ng-show="ciAttributesCount" id="collapsebutton_$index" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_$index" class="nodisp expandcollapse no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">nav.IdentifySourceName</a>
<span style="padding: 2px 12px;">Source Id: nav.IdentificationSourceId</span>
<br />
<span style="padding: 2px 12px;">Data Source: nav.DataSource</span>
<br />
<span style="padding: 2px 12px;">Create New: nav.IsCreateNew</span>
<br />
</li>
</ul>
</div>
edited Mar 28 at 14:51
SmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
answered Mar 28 at 13:47
iyyappaniyyappan
6593 silver badges9 bronze badges
edited Mar 28 at 14:51
SmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
edited Mar 28 at 14:51
SmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
edited Mar 28 at 14:51
SmartestVEGA
3,10715 gold badges56 silver badges98 bronze badges
3,10715 gold badges56 silver badges98 bronze badges
answered Mar 28 at 13:47
iyyappaniyyappan
6593 silver badges9 bronze badges
answered Mar 28 at 13:47
iyyappaniyyappan
6593 silver badges9 bronze badges
answered Mar 28 at 13:47
iyyappaniyyappan
6593 silver badges9 bronze badges
6593 silver badges9 bronze badges
almost there some alignment issues ...let me check
– SmartestVEGA
Mar 28 at 13:52
three expand and collapse buttons are sitting together, but ideally it should somewhere near to left side of each repeat, thats the issue
– SmartestVEGA
Mar 28 at 13:54
In this case we need to move expand collapse buttons to ul tag above. and attached with each ul using with CSS
– iyyappan
Mar 28 at 13:57
previus code was better, now when i click on expand, it is opening a popup, more only one collapse button working
– SmartestVEGA
Mar 28 at 14:02
can you revert the previous one please
– SmartestVEGA
Mar 28 at 14:02
|
show 11 more comments
almost there some alignment issues ...let me check
– SmartestVEGA
Mar 28 at 13:52
three expand and collapse buttons are sitting together, but ideally it should somewhere near to left side of each repeat, thats the issue
– SmartestVEGA
Mar 28 at 13:54
In this case we need to move expand collapse buttons to ul tag above. and attached with each ul using with CSS
– iyyappan
Mar 28 at 13:57
previus code was better, now when i click on expand, it is opening a popup, more only one collapse button working
– SmartestVEGA
Mar 28 at 14:02
can you revert the previous one please
– SmartestVEGA
Mar 28 at 14:02
almost there some alignment issues ...let me check
– SmartestVEGA
Mar 28 at 13:52
almost there some alignment issues ...let me check
– SmartestVEGA
Mar 28 at 13:52
three expand and collapse buttons are sitting together, but ideally it should somewhere near to left side of each repeat, thats the issue
– SmartestVEGA
Mar 28 at 13:54
three expand and collapse buttons are sitting together, but ideally it should somewhere near to left side of each repeat, thats the issue
– SmartestVEGA
Mar 28 at 13:54
In this case we need to move expand collapse buttons to ul tag above. and attached with each ul using with CSS
– iyyappan
Mar 28 at 13:57
In this case we need to move expand collapse buttons to ul tag above. and attached with each ul using with CSS
– iyyappan
Mar 28 at 13:57
previus code was better, now when i click on expand, it is opening a popup, more only one collapse button working
– SmartestVEGA
Mar 28 at 14:02
previus code was better, now when i click on expand, it is opening a popup, more only one collapse button working
– SmartestVEGA
Mar 28 at 14:02
can you revert the previous one please
– SmartestVEGA
Mar 28 at 14:02
can you revert the previous one please
– SmartestVEGA
Mar 28 at 14:02
|
show 11 more comments
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55398059%2fexpanding-and-collapsing-in-ul-tag%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
are you asking how to bind the new Expand/Collapse buttons to their respective <UL>?
– Saharsh
Mar 28 at 13:12
yes... i need to add buttons for each UL repeats for expanding and collapsing
– SmartestVEGA
Mar 28 at 13:17
Updated the real code instead of rendered code
– SmartestVEGA
Mar 28 at 13:21
Hi @SmartestVEGA, you basically want to create an accordion within an accordion, right ? Have you looked at similar questions and their answers : stackoverflow.com/search?q=accordion+within+accordion ?
– Jake
Mar 28 at 13:24
those answers are pertaining to jquery and javascript, i need it in angularjs
– SmartestVEGA
Mar 28 at 13:26