Switch between 3 different divs by clicking on them using ng-click

Question

Switch between 3 different divs by clicking on them using ng-click

I have three different anchors, and I want each one to trigger the display of a unique full-width div below it. The behavior should be similar to the way it works on the iPad example found at this site:

For instance, clicking on the first anchor should open the first container, while clicking on the second anchor should close the first one and open the second.

Is it possible to use ng-click to toggle an active state for this functionality? Should this be implemented within the controller?

Below is the HTML code for the row with the anchors. The content to be displayed is in a separate container. Any assistance or suggestions would be greatly appreciated.

<div class="row">
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor active">
                <div class="box box-drop ">
                    <h3>Data Explorer</h3>
                    <p>It’s a brave new data world. Explore and navigate new realms of possibility such as post density, sentiment analysis, and even sort by hue and saturation.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor">
                <div class="box box-drop">
                    <h3>Analytics</h3>
                    <p>Exciting twists on old standards, Socialight's analytic platform allows you to analyze any social account in the world. Track your competitors and make informed, comparative decisions for your next campaign.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor">
                <div class="box box-drop">
                    <h3>Export & Embed</h3>
                    <p>Enliven billboards, websites, or TV screens with tailored feeds of tagged content from your Data Explorer. Improve your next transfer all of this useful information to outward facing products.</p>
                </div>
            </a>
        </div>
    </div>
</div>

Here is a screenshot depicting what the layout looks like. The top row consists of the anchors that control the content shown below.

javascript jquery html css angularjs

Answer 1

Answer №1

To enhance your markup, consider using either an ng-switch or an ng-if directive. In addition, for navigation purposes, implement ng-click events.

<div class="row">
    <div class="col-xs-12 col-md-4" ng-click="page=1">
        <a href="" class="box-anchor active">
            <div class="box box-drop ">
                <h3>Data Explorer</h3>
                <p>Embark on a journey into the world of data exploration. Discover new possibilities like post density, sentiment analysis, and even sorting by hue and saturation.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-md-4" ng-click="page=2">
        <a href="" class="box-anchor">
            <div class="box box-drop">
                <h3>Analytics</h3>
                <p>Revolutionize traditional analysis with Socialight's analytic platform that enables you to examine any social account worldwide. Monitor competitors and make informed decisions for your future campaigns.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-md-4" ng-click="page=3">
        <a href="" class="box-anchor">
            <div class="box box-drop">
                <h3>Export & Embed</h3>
                <p>Bring life to billboards, websites, or TV displays by showcasing custom feeds of tagged content from your Data Explorer. Enhance your external products with valuable insights derived from this information.</p>
            </div>
        </a>
    </div>
</div>

When structuring your content markup, incorporate the ng-switch directive. Keep in mind that ng-switch-default represents the default page visible when a user has not selected any specific page. If a user chooses a page, the default page will be displayed since there is no corresponding ng-switch mapped to "1" in this scenario.

<div ng-switch="page">
    <div ng-switch-default>
        Content for page one
    </div>
    <div ng-switch-when="2">
        Content for page two
    </div>
    <div ng-switch-when="3">
        Content for page three
    </div>
</div>

Answer 2

To enhance your markup, consider using either an ng-switch or an ng-if directive. In addition, for navigation purposes, implement ng-click events.

<div class="row">
    <div class="col-xs-12 col-md-4" ng-click="page=1">
        <a href="" class="box-anchor active">
            <div class="box box-drop ">
                <h3>Data Explorer</h3>
                <p>Embark on a journey into the world of data exploration. Discover new possibilities like post density, sentiment analysis, and even sorting by hue and saturation.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-md-4" ng-click="page=2">
        <a href="" class="box-anchor">
            <div class="box box-drop">
                <h3>Analytics</h3>
                <p>Revolutionize traditional analysis with Socialight's analytic platform that enables you to examine any social account worldwide. Monitor competitors and make informed decisions for your future campaigns.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-md-4" ng-click="page=3">
        <a href="" class="box-anchor">
            <div class="box box-drop">
                <h3>Export & Embed</h3>
                <p>Bring life to billboards, websites, or TV displays by showcasing custom feeds of tagged content from your Data Explorer. Enhance your external products with valuable insights derived from this information.</p>
            </div>
        </a>
    </div>
</div>

When structuring your content markup, incorporate the ng-switch directive. Keep in mind that ng-switch-default represents the default page visible when a user has not selected any specific page. If a user chooses a page, the default page will be displayed since there is no corresponding ng-switch mapped to "1" in this scenario.

<div ng-switch="page">
    <div ng-switch-default>
        Content for page one
    </div>
    <div ng-switch-when="2">
        Content for page two
    </div>
    <div ng-switch-when="3">
        Content for page three
    </div>
</div>

Answer 3

Answer №2

Utilizing ng-class can help toggle an 'active' class, effectively showing or hiding your content divs with a smooth transition.

<div class="row">
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 1">
                <div class="box box-drop ">
                    <h3>Data Explorer</h3>
                    <p>Delve into the world of data exploration. Discover new possibilities such as post density, sentiment analysis, and even sorting by hue and saturation.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 2">
                <div class="box box-drop">
                    <h3>Analytics</h3>
                    <p>Exciting updates to traditional standards, Socialight's analytic platform empowers you to analyze any social account worldwide. Monitor competitors and make informed decisions for your next campaign.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 3">
                <div class="box box-drop">
                    <h3>Export & Embed</h3>
                    <p>Enhance billboards, websites, or TV screens with customized feeds of tagged content from your Data Explorer. Transfer valuable information to external products.</p>
                </div>
            </a>
        </div>
    </div>
</div>


<div ng-class="{active: myActive == 1}">Content Area 1</div>
<div ng-class="{active: myActive == 2}">Content Area 2</div>
<div ng-class="{active: myActive == 3}">Content Area 3</div>

By clicking on the div elements with the ng-click directive, the value of myActive in your scope will change accordingly. This will apply the 'active' class to the section below it, allowing you to dynamically show or hide content based on this class. Adding CSS transitions can further enhance the visual appeal of the toggling effect.

Answer 4

Utilizing ng-class can help toggle an 'active' class, effectively showing or hiding your content divs with a smooth transition.

<div class="row">
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 1">
                <div class="box box-drop ">
                    <h3>Data Explorer</h3>
                    <p>Delve into the world of data exploration. Discover new possibilities such as post density, sentiment analysis, and even sorting by hue and saturation.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 2">
                <div class="box box-drop">
                    <h3>Analytics</h3>
                    <p>Exciting updates to traditional standards, Socialight's analytic platform empowers you to analyze any social account worldwide. Monitor competitors and make informed decisions for your next campaign.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 3">
                <div class="box box-drop">
                    <h3>Export & Embed</h3>
                    <p>Enhance billboards, websites, or TV screens with customized feeds of tagged content from your Data Explorer. Transfer valuable information to external products.</p>
                </div>
            </a>
        </div>
    </div>
</div>


<div ng-class="{active: myActive == 1}">Content Area 1</div>
<div ng-class="{active: myActive == 2}">Content Area 2</div>
<div ng-class="{active: myActive == 3}">Content Area 3</div>

By clicking on the div elements with the ng-click directive, the value of myActive in your scope will change accordingly. This will apply the 'active' class to the section below it, allowing you to dynamically show or hide content based on this class. Adding CSS transitions can further enhance the visual appeal of the toggling effect.

Answer 5

Answer №3

Check out how the angular bootstrap accordion is implemented.

One cool feature is that it can automatically close all other accordion groups when you expand one.

If you're interested, you can find the source code for the accordion on GitHub here.

You might want to pay attention to the closeOthers function in particular. Just make sure to logically organize your divs for everything to work smoothly.

// Make sure all groups within this accordion are closed unless specified not to 
this.closeOthers = function(openGroup) { 
    var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers; 
    if ( closeOthers ) { 
        angular.forEach(this.groups, function (group) { 
            if ( group !== openGroup ) { 
                group.isOpen = false; 
            } 
        }); 
    } 
};

Answer 6

Check out how the angular bootstrap accordion is implemented.

One cool feature is that it can automatically close all other accordion groups when you expand one.

If you're interested, you can find the source code for the accordion on GitHub here.

You might want to pay attention to the closeOthers function in particular. Just make sure to logically organize your divs for everything to work smoothly.

// Make sure all groups within this accordion are closed unless specified not to 
this.closeOthers = function(openGroup) { 
    var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers; 
    if ( closeOthers ) { 
        angular.forEach(this.groups, function (group) { 
            if ( group !== openGroup ) { 
                group.isOpen = false; 
            } 
        }); 
    } 
};

Switch between 3 different divs by clicking on them using ng-click

Answer №1

Answer №2

Answer №3

Similar questions

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

What is the best way to modify a particular h4 tag without impacting the rest?

Comparing the distinction between assigning values to res and res.locals in a Node.js application using Express

The art of blending different inheritance (Styled Elements)

Tips on how to target an iframe upon being shown using Fancybox3

Activate the trigger event when the popover is activated remotely

What is the best way to manage the package-lock.json file during deployment from git using SSH?

What is the best way to extract the SRC information from image tags in an HTML string?

Is it possible to utilize BootstrapVue alongside Vue.Draggable for dragging and dropping items between a list and a b-table?

Expanding div that adjusts to content size and expands to fit entire page

Selecting Elements with JQuery

Finding the index of a clicked link using jQuery

Deciphering JSON Objects with JavaScript

Challenges encountered when passing objects with Angular 2 promises

What is the best location for loading large amounts of data in the MEAN+Mongoose framework?

Is it possible to merge the bind event for two selectors using jQuery?

Is there a way to seamlessly transition between images in a slider every 3 seconds using javascript?

Find the trending posts on mongoDB within the past week starting from today's date

Can you help me locate the xpath that is adjacent to the element I am familiar with?

What is the best way to retrieve and parse XML using node.js?