Last Updated
Viewed 42 Times
        

In the code below I have anchor tag where window and less class are applied. How can I remove anchor tag such that classes that are applied to anchor tags are used in the code and functionality does not break?

EDIT - Added some more code.

.html file

 <div class="read-window-links">

        <a class="window"><span class="read-window">
            <p>${properties.readText}</p>
          </span></a>

        <a class="less hidden"><span class="read-window less">
            <p>${properties.readLessLinkText}</p>
          </span></a>
      </div>

.css file


.read-window-section .read-window-links a {
  text-decoration: none;
}

.read-window-section .read-window-links {
  background-color: #e6eff0;

}

.read-window-section .full-text {
  display: none;
}

.read-window-section .read-window-links  .read-window p,
.read-window-section .read-window-links .less .read-window p {
  padding: 24px;
  margin: 0px;
}

.read-window-section .read-window-links .window .read-window p:after {
  content: url(down_arrow_icon.png);
  display: inline-block;

}

.read-window-section .read-window-links .less .read-window p:after {
  content: url(up_arrow_icon.png);
  display: inline-block;

}

How can I have an image (little arrow on the right) set next to an anchor tag <a> and keep them both aligned vertically and horizontally. I've been trying this in multiple ways but came across errors with every method I tried. either the <a> tag wont work (not clickable) in html emails or the arrow would be outside the clickable area. I only need one of these following codes .Here's some what Iv'e tried:

First code: the problem here is: if the user clicked on the arrow it wont response, because it's not inside the <a> tag, but this is working

<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
        <tr>
          <td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
            <a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
          </td>
          <td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
          <td><img src="http://via.placeholder.com/5/007cb0" width="5" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Second code: I couldn't get the text vertical aligned within the <td>

<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
        <tr>
          <td height="50" align="left" style="text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: 100% !important;">
            <a style="height:100%;font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer; display: block">Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;"></a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Third code The problem here is: It didn't work in any email client and the link is not clickable.

<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;">
        <tr>
          <td>
            <a style="border: 1px solid red; padding: 20px;display: block; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
              <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
                <tr style="font-size: 16px; text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
                  <td align="left" style="text-decoration: none; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700;  vertical-align: top; line-height: normal !important;">
                    GET VERSATILE
                  </td>
                  <td align="right" style="text-align: center; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15" /></td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Summaries:

I need this <a> tag to have an arrow next to it and to be Clickable all around the blue area.

Thanks for the help.

So I've created a little help thing using an anchor tag so that when users hover over the "?" they can see a little box with some instructions on it. It works well but when users click on the "?" link it will go to the top of the page. So I am wondering if there is a way to disable that event from happening…

HTML:

<a class="questions" href="#" title="instructions are here">?</a>

CSS:

.questions:link{
    color:#fff;
    background-color:#feb22a;
    width:12px;
    height:12px;
    display:inline-block;
    border-radius:100%;
    font-size:10px;
    text-align:center;
    text-decoration:none;
    -webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
}

I've tried to use things like this but it disables the instructions from coming up.

This:

.not-active {
   pointer-events: none;
   cursor: default;
}

Well, how can I change the class (active/non_active) of an element with the ID that a anchor tag link activates with jquery?

HTML:

<a href="#element1">Show element 1</a>
<a href="#element2">Show element 2</a>

<div id="element1" class="active"><p>Element 1</p></div>
<div id="element2" class="non_active"><p>Element 2</p></div>

CSS:

.active{ visibility:visible; }
.non_active{ visibility:hidden; }

Thanks in advance!

Similar Question 4 (1 solutions) : How to use anchor tag in URL?

Similar Question 5 (1 solutions) : anchor tag - can it be used at the end of the link

Similar Question 7 (4 solutions) : How can I add space between anchor tags?

Similar Question 9 (2 solutions) : How to hide an anchor tag by the #id of the href

cc