CODEWITHSUNDEEP
javascripthtmlcss
shaaa
shaaa

Reputation: 235

Turn accordion 90 degree

I would like to know how can i turn the accordion to 90 degree on click of it for repo and bundles in the below plunkr. I am new to css. Any hekp on this is appreciated. Plunkr link - https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview

<html>
  <head>
    <script src="angular.min.js"></script>
    <link rel="stylesheet" href="font-awesome.min.css"/>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body data-ng-app="testApp" data-ng-controller="treeTable" >
    <div class="row">
<div class="col-md-12">
    <div class="tableheight ">
    <table class="treetable-nested childtable">
    <thead>
      <tr>
        <th style="width:5%;">
          <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th> 
        <th >
          Name
        </th>
        <th class="cell-members">
          Version
        </th>
        <th class="cell-members">
          Size
        </th>
        <th class="cell-members">
        Date Modified
        </th>
        <th class="cell-members">
        Labels
        </th>
        <th class="cell-members">
        Description
        </th>
      </tr>
    </thead>
    <tbody class="newRepo" style="font-size:12px" data-ng-repeat="item in list">
        <tr id={{item.id}}>
            <td>
                <button class="accordion" ng-click="displayChildren(item,item.id)"></button><input class='parentCheckbox' ng-model="item.selected" type="checkbox" ng-change = "toggleChildren(item)"/>
            </td>
            <td>
                {{item.name}}
            </td>
            <td class="cell-members">
<!--                {{item.version}} --> 0
            </td>
            <td class="cell-members">
<!--                {{item.size}}-->  0
            </td>
            <td class="cell-members" >
<!--                {{item.date}}-->   0
            </td>
            <td class="cell-members">
                {{item.label}}
            </td>
            <td class="cell-members">
                {{item.description}}
            </td>
        </tr>

        <tr ng-if='item.children && item.children.length > 0'>
            <td colspan="7" id="bundle_1" >
                <table ng-show="item.showTree" class="treetable-nested" style="width:100%;"> 
                    <tbody ng-repeat='bundles in item.children'>
                        <tr id={{bundles.bundleId}} ng-init="parentScope = $parent.$parent;">
                            <td style="width:5%;padding-left:15px;white-space:nowrap"><button class="accordion test" ng-click='showComponents = !showComponents'></button><input ng-model="bundles.selected" ng-change="toggleChildren(bundles, parentScope)" type="checkbox" /></td>
                            <td>{{bundles.bundleName}}</td>
                            <td class="cell-members">{{bundles.bundleVersion}}</td>
                            <td class="cell-members">{{bundles.bundleSize}}</td>
                            <td class="cell-members">{{bundles.bundleModified}}</td>
                            <td class="cell-members">{{bundles.bundleLabels}}</td>
                            <td class="cell-members">{{bundles.bundleDescription}}</td>
                        </tr>
                        <tr ng-show='showComponents' ng-repeat='components in bundles.components' id={{components.key}} ng-init="bundleScope = $parent;">
                            <td style="width:5%;padding-left:30px;"><input type="checkbox" ng-model="components.selected" ng-change="toggleChildren(components, bundleScope)"/></td>
                            <td>{{components.value}}</td>
                            <td>{{components.Version}}</td>
                            <td>{{components.Size}}</td>
                            <td>{{components.Modified}}</td>
                            <td>{{components.Labels}}</td>
                            <td>{{components.Description}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
  </table>
    </div>

</div>

</div>
  </body>

</html>

Upvotes: 0

Views: 959

Answers (3)

Awad Maharoof
Awad Maharoof

Reputation: 2370

Here is how I solved your problem:

Step 1: Figure out how to rotate elements with CSS. You can use the CSS transform property to rotate elements.

Step 2: Define a CSS class which would apply the transformation to the icon 

.accordion.expanded:before {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

Step 3: Figure out how to apply the CSS class with the transformation through AngularJS. You can toggle CSS classes with AngularJS in multiple ways.

One option would be passing the $event onlick

<button class="accordion" ng-click="displayChildren(item,item.id,$event)"></button>

and toggling the class on the element like: 

$scope.displayChildren = function(item, id, event) { 
      angular.element((event.target)).toggleClass('expanded');
     //rest of your logic
}

The second option is by manipulating a variable and setting the class to ng-class like

<button class="accordion" ng-click='showComponents = !showComponents' ng-class="{'expanded' : showComponents}"></button>

You can find the plunker i tried this out here

Upvotes: 1

Alejalapeno
Alejalapeno

Reputation: 1018

Use Angular to attach an active class to expanded accordions that applies the CSS transform.

.accordion.active:before {
  transform:rotate(90deg);
}

Looks like you can add ng-class="{'active' : item.showTree}" to accomplish an active class on the button. You also already have an :after target for an active class so you should remove that too.

Upvotes: 0

Farzin Kanzi
Farzin Kanzi

Reputation: 3433

You can do this:

.accordion:active {
            transform: rotateX(90deg);
        }

If you want it rotetes permanently use jquery:

$('.accordion').click(function(){$(this).css('transform', 'rotateX(90deg)');});

and if you want it rotates and rotate back by button click:

<style>
  .rotated {
        transform: rotateX(90deg);
    }
</style>

$('#btnRotator').click(function(){$('.accordion').toggleClass('rotated');});

Upvotes: 0

Related Questions